How to determine when the gulp task running browserify is complete?

Question

I have such a gulp task

gulp.task("js-min", function () {
  browserify(config.paths.mainJs)
    .transform(reactify)
    .bundle()
    .pipe(source('tec.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write(config.paths.dist))
    .pipe(gulp.dest(config.paths.dist));
});

that create the minified version of the application. It runs periodically by the gulp-watch task. The problem I see, is that gulp tells me this task finishes in 30ms, but if I check the file being generated, it takes another 30s to see the actual new file being updated.

How shall I change the gulp task js-min so I know exactly when the file was finished updating in file system.

Answer 1

There are two solutions, and without knowing what browserify package you are using.

If it is promise based, then simply edit your code to return that promise:

gulp.task("js-min", function () {
   return  browserify(config.paths.mainJs)

If it is not promise-based, then it will have some kind of an onend or done method that takes a callback. In that case, it would be like this:

gulp.task("js-min", function (done) {
  browserify(config.paths.mainJs)
    .transform(reactify)
    .bundle()
    .pipe(source('tec.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write(config.paths.dist))
    .pipe(gulp.dest(config.paths.dist))
    // THIS IS THE LINE TO CHANGE
    .onfinish(done);
});