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.

Your ``gulp.watch`` line refers to ``sources.js.main``... I assume you were just simplifying things to just use ``sources`` but you missed one? — Martin Atkins, Jul 27 '14 at 04:09
Yes I was, correcting. Like I said, the concat works great most of the time. — Jake Wilson, Jul 27 '14 at 05:06
Did you find a solution to this? We are seeing the same problem and it can sometimes be 'fixed' temporarily by changing the order of the scripts. Definitely an issue somewhere. — Russ Back, Jan 20 '15 at 12:24
I never did find a resolution to this no. Usually I just resave the file that gets left out and that somehow fixes it. It's a really weird and random problem. And I'm not sure how to use gulp to debug it and see the problem. — Jake Wilson, Jan 20 '15 at 15:59
Did you log this issue on the concat github page? https://github.com/contra/gulp-concat/issues — Duderino9000, Nov 20 '15 at 20:24
Yes long ago: https://github.com/contra/gulp-concat/issues/54 — Jake Wilson, Nov 20 '15 at 21:57

score 2 · Answer 1 · answered Apr 03 '16 at 12:27

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

Gulp Watch Concat sometimes ignores some JS files

1 Answers1