Watchify doesn't always detect changes in javascript files

Question

I created a gulp task for bundling modules with browserify and I am using watchify to watch for changes. Here is my gulp task for watchify:

gulp.task('watch:browserify', function () {
    var opts = assign({}, watchify.args, {
        entries: ['./js/app.js'],
        debug: true,
        basedir: './app/',
        paths: ['./lib']
    });

    var b = watchify(browserify(opts));

    b.on('update', function () {
        bundle();
    });

    function bundle() {
        gutil.log(gutil.colors.blue("Starting Browserify..."));
        var time = Date.now();
        return b.bundle()
            .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error')))
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('app'))
            .on('end', function () {
                var duration = Date.now() - time;
                gutil.log(gutil.colors.blue('Finished Browserify') + " (%dms)", duration);
            })
    }

    bundle();
});

If I edit main js file (./js/app.js), the change is always detected. But when I edit some other files that the main file requires, the change is detected roughly every other time (but not always). Am I doing something wrong here?

Here is the full Github repo so maybe you get the complete idea how I planned this to work

Answer 1

I had the same issue, and I had everything @akarve mentioned set up correctly. I went back to watchify: "^2.6.0" and the issue was resolved. However build/detection time was a tad slower - about half a second. Still, much better than occasionally (often!) not having my changes detected by watchify.

Related discussion here (also where I found the comment about v2.6.0) - https://github.com/substack/watchify/issues/216#issuecomment-119285896

Answer 2

There are two issues with your code sample.

First, watch:browserify must either take a callback or return a stream, or race conditions can occur, as discussed here. So, for example, the last line in your task could be return bundle();.

Second, when using watchify, the cache and packageCache options must be passed to browserify(), as shown below and specified here.

    var b = browserify({ cache: {}, packageCache: {} });

Finally, ensure that app.js in fact depends, somewhere in its dependency chain, on the other files that you are editing.