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?

Answer 1

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

Answer 2

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.