Gulp Watch Concat sometimes ignores some JS files

Question

I have a Gulp concat watch task setup to concat some JS files:

var sources = [
  'public/js/scriptA.js',
  'public/js/scriptB.js',
  'public/js/scriptC.js',
  'public/js/scriptD.js',
  'public/js/scriptE.js'
];

gulp.task('main.js', function(){
    return gulp.src(sources)
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./public/js'));
});

gulp.task('watch', function() {
    gulp.watch(sources, ['main.js']);
});

Pretty normal setup I think. Whenever any of the scripts change, the main.js is created by concatenating the scripts in that order. It works fine 99% of the time.

But sometimes, maybe randomly, the concat simply leaves out 1 or more of the files. I'll be editing scriptB.js for example, save it, then look at main.js and it concat'ed only scriptA, scriptB and scriptE. It completely left out C and D. And sometimes it might just be C. Sometimes it might be D. Sometimes it might be A. It's just random. I didn't do anything to any of the files it leaves out. I have it opened in my editor but it's unchanged and just sitting there. Gulp just decides to leave it out for some random reason sometimes.

The way I fix it is to simply open up whatever script was left out and add a space to the end of a random line or something and then save it, then the main.js is concatenated like I'd expect it. There was nothing wrong with the file. Just had to resave it.

Is this an outstanding bug to anyone's knowledge? I haven't been able to find any of info on this bug anywhere. Is there anything I can do to debug or log this issue to figure out how to recreate it?

One thing I did notice, was, lets say I was editing scriptC and save it, and then notice scriptD was missing. If I go back to scriptC and save it again, scriptD is still not concatenated in. I HAVE to open up scriptD and save it to force it to be included back into the main.js. So once I see the problem popup, I can typically recreate it in this manner.

This typically only happens about 1 in 20 saves.

Answer 1

You could use the gulp-include Plugin to get rid of the Problem. With this Plugin you can include/require your js-files by using special comments in the main.js file.

main.js:

//=require 'public/js/scriptA.js' 
//=require 'public/js/scriptB.js' 
//=require 'public/js/scriptC.js' 
//=require 'public/js/scriptD.js' 
//=require 'public/js/scriptE.js' 

gulpfile.js:

var gulp          = require("gulp"),
    include       = require("gulp-include");

gulp.task("scripts", function() { 

    gulp.src("main.js")
        .pipe(include())
            .on('error', console.log)
        .pipe(gulp.dest("./public/js"));

});

gulp.task('watch', function() {
    gulp.watch(sources, ['main.js']);
});

The Plugin is available via npm: https://www.npmjs.com/package/gulp-include