Watchify并不总是能够检测到JavaScript文件的更改。

Question

我为使用browserify打包模块创建了一个gulp任务，并使用watchify来监视更改。这是我的watchify gulp任务：

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();
});

如果我编辑主JS文件（./js/app.js），更改总是被检测到。但当我编辑一些其他文件，而这些文件需要主文件时，更改大约每隔一次才会被检测到（但并不总是）。我在这里做错了什么吗？

这是完整的Github存储库，也许你可以完全理解我计划如何工作

- tuks

---

我有同样的问题。它并不总是检测到“小”的更改。我仍然要按3-5次回车键来创建一些新行。他总是能够检测到它，当他重建我的应用程序时我会删除这些行。我知道，这很尴尬，但它确实有效 :D - marcel

@marcel 是的，我现在也是这样做，但这真的非常非常烦人。 - tuks

我已经尝试了你的GitHub项目 - 检测app/js/...中所有JavaScript文件的更改在我的机器上运行良好。（也许你现在已经修复了它？） - Simon Groenewolt

Answer 1

你的代码样例存在两个问题。

首先，watch:browserify 必须要接受回调函数或返回流，否则会出现竞争条件，如 此处 所述。例如，你任务中的最后一行可以改为 return bundle();。

其次，在使用 watchify 时，必须将 cache 和 packageCache 选项传递给 browserify()，如下所示并在 此处 中指定。

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

最后，请确保在依赖链的某个地方，app.js 实际上依赖于您正在编辑的其他文件。

- akarve

Answer 2

我遇到了相同的问题，我也按照@akarve提到的一切正确地设置了。我回到了watchify:“^2.6.0”，问题得到了解决。然而构建/检测时间稍微慢了一点 - 大约半秒钟。不过，这比偶尔（经常！）无法检测到我的更改要好得多。

相关讨论在这里（也是我找到关于v2.6.0的评论的地方）- https://github.com/substack/watchify/issues/216#issuecomment-119285896

- GTCrais