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

i have the same problem. it don't always detects "small" changes. I still hit enter 3-5 times to create some new lines. He will always detect it and when he rebuild my app i remove the lines. I know, it is awkward but it works :D — marcel, Jun 11 '15 at 12:13
@marcel yeah I do the same for now but it's really, really annoying — tuks, Jun 11 '15 at 12:48
I've tried your GitHub project - detection of changes to all javascript files in app/js/... is working fine on my machine. (Maybe you've fixed it by now?) — Simon Groenewolt, Sep 05 '15 at 21:02

akarve · Answer 1 · 2015-10-16T18:33:00.927

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.

score 1 · Answer 2 · answered Jul 18 '17 at 12:26

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

Watchify doesn't always detect changes in javascript files

2 Answers2