Gulp js running twice for the watch statement

Question

I see the console log statement that js task run twice once I change any of the javascript files. I wonder why it run two times for each change?

var gulp = require('gulp');
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");

gulp.task('default', function() {
    gulp.watch("public/js/**/*.*", ["js"]);
});

gulp.task("js", function(){
    var js = [
        "public/js/**/*.js",
        "!public/js/api/**/*.js"
    ];

    gulp.src(js)
    .pipe(concat("app.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("public/js"));
});

Console

[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 1.6 ms
[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 5.1 ms

Answer 1

The problem is that you are watching the same directory which is used as the destination directory in the task you run when the change is detected. Currently, your build flow looks like this:

1. Imagine you're modifying a file public/js/script.js.

2. The watch task detects the change and starts your custom js task. As the result, the public/js/app.min.js file is created.

3. Since the app.min.js is inside the watched directory, the watch task detects another change, hence the js task is executed once more. You actually should run into a loop, but Gulp seems to be smart enough do detect such a cycle.

The best solution for this issue is to separate source files from the output. In your task pipe, set the destination folder to something outside the source directory, for example:

.pipe(gulp.dest("dist/js"));

After that, your project should has the following structure:

public
  js
    script.js
dist
  js
    app.min.js
grunfile.js
...

Where the public directory is used to keep the source files that are watched and the dist directory holds the output of the build. If I were you, I would reconsider renaming the public directory to something more descriptive like src, but that is up to you :)