Gulp-Inject Not Working

Question

I have a simple Gulp build process setup for testing. I've read the documentation many times but I can't seem to get Gulp-inject to inject the scripts I want into an index.html file.

My Gulp file looks like this:

gulp.task('inject1', function() {
   return gulp.src('app/index.html')
        .pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(gulp.dest("dist"));
});

gulp.task('inject2', function() {
    return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(inject("./app/index.html"))
        .pipe(gulp.dest("./dist"));
});

This is part of my Index.html:

<!-- inject:js -->

<!-- endinject-->

Both of these are copied from the documentation on github.

When I run either of these tasks the console just says "Started 'inject' Finished 'Inject' '

In my ./dist folder it creates an Index.html file but no js files are injected.

I've tried typing in the src and inject properties many different way but no luck. Any idea what I'm doing wrong?

I'm having this same issue. It looks like it's doing a noop, because the resulting HTML file simply preserves the and comments. — Brady Isom, May 15 '14 at 23:11
As am I. I really wish there was some kind of debugging mechanism present. — John Haugeland, Mar 06 '15 at 00:56
I had this same error message, but it turned out that my index.html file was empty! — user2023861, Nov 22 '17 at 16:32

Gilad Peleg · Answer 1 · 2015-07-19T08:48:36.567

First of all you have a mistake in your endinject tag:

<!-- endinject-->

should be

<!-- endinject -->

This plugin has worked great for me and others in various settings, so the problem is probably in your configuration. Because when you are using streaming, you cannot be sure which files you pipe along, always try to use a plugin to see exactly what files you are piping. I recommend using gulp-using. Try this to debug your setup:

var debug = require('gulp-debug');

gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false})
    .pipe(debug())
    .pipe(inject("./app/index.html"))
    .pipe(gulp.dest("./dist"));
});

Also make sure you use the same method to verify that you match your html file as well. Other than that - it's just trial and error until you understand piping to get just the right files with the correct path.

If gulp-inject isn't injecting any files, that means you didn't pipe them correctly, or your target inject was not correct. The plugin works, and works great for me.

If you need to see an example working gulp file, check out this this gulpfile.js gist

Good eye. I wouldn't have been able to guess that my problem was the spaces in the comments. — welbornio, Jun 13 '14 at 19:49
gulp-using is blacklisted as a gulp plugin, gulp-debug recommended instead : https://github.com/gulpjs/plugins/blob/master/src/blackList.json#L50 — Cosmin, Mar 06 '15 at 15:57
Just ran into a similar issue; I was using `` in my code. Apparently the `//` is not allowed and was causing issues. — Topher Fangio, Apr 09 '15 at 15:52

score 1 · Answer 2 · answered Feb 11 '16 at 10:35

I had the same problem with the following code:

    var injectSrc = gulp.src(['./public/css/*.css', '.public/js/*.js'], {read: false});
var injectOptions = {
    ignorePath: '/public'   
};
var options = {
    bowerJson: require('./bower.json'),
    directory: './public/lib',
    ignorePath: '../../public'
}

gulp.task('inject', function() {
    return gulp.src('./src/views/*.html')
            .pipe(debug())
            .pipe(wiredep(options))
            .pipe(debug())
            .pipe(inject(injectSrc, injectOptions))
            .pipe(debug())
            .pipe(gulp.dest('./src/views'));

});

My index.html had the following:

<!--bower:css-->
<!--endbower-->
<!--bower:js-->
<!--endbower-->
<!--inject:css-->
<!--endinject-->
<!--inject:js-->
<!--endinject-->

Click on this link to see what my file structure was. The inject was creating the css files correctly but not the js files. Also the bower dependencies were working just fine.

Finally I caught the missing '/' in the array passed to gulp.src(). After fixing that to:

var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'], {read: false});

it works correctly.

Gulp-Inject Not Working

2 Answers2