javascript - Watchify 并不总能检测到 javascript 文件的变化

Question

我创建了一个 gulp 任务，用于将模块与 browserify 捆绑在一起，我正在使用 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)，总是会检测到更改。但是当我编辑主文件需要的一些其他文件时，大约每隔一次(但不总是)检测到更改。我在这里做错了什么吗？

Here is the full Github repo所以也许你已经完全了解我是如何计划这个工作的了

Answer 1

您的代码示例有两个问题。

首先，watch:browserify 必须接受回调或返回流，否则可能会出现竞争条件，如 here 所述。因此，例如，您任务中的最后一行可以是 return bundle();。

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

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

最后，确保 app.js 在其依赖链中的某处确实依赖于您正在编辑的其他文件。