Gulp Watch Concat Sometimes Ignores Some JS Files

Question

I have the task of setting up the concat watch Gulp task to concatenate 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 setting, I think. Whenever a script changes, main.js is created by concatenating the scripts in that order. It works fine in 99% of cases.

But sometimes, perhaps randomly, concat just leaves 1 or more files. I will edit scriptB.js , for example, save it, and then look at main.js , and it only concatenates scriptA , scriptB and scriptE . He completely left C and D. And sometimes it can be just C. Sometimes it can be D. Sometimes it can be A. It is just random. I did not do anything with the files that it leaves. I opened it in my editor, but it did not change and just sat there. Gulp just decides to leave it for some random reason.

The way I fix this is to simply open the entire script and leave a space at the end of a random line or something else and then save it, then main.js will be merged as I expected it. There was nothing wrong with the file. Just needed to reinstall it.

Is this an outstanding mistake for any knowledge? I could not find information about this error anywhere. Is there anything I can do to debug or register this problem to figure out how to recreate it?

One thing I noticed was, let's say, edited the scriptC and saved it, and then noticed that scriptD missing. If I go back to scriptC and save it again, scriptD will still not be concatenation. I have to open scriptD and save it so that it is included back in main.js Therefore, as soon as I see a problem popup, I can usually recreate it this way.

Usually this happens only about 1 out of 20 saves.

Answer 1

You can use the gulp -include plugin to get rid of the problem. With this plugin, you can include / request your js files 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 through npm: https://www.npmjs.com/package/gulp-include