javascript - gulp watchify 需要两次保存才能包含更改

Question

尝试使用 watchify 一段时间了，但我在保存时遇到了问题。

似乎对于我所做的每一个更改，我都需要保存两次才能将更改应用到输出中。

如果我在任何 js 文件中添加代码，则仅当任务运行两次时才会显示新添加的代码。

我的 mainScrpits 任务代码

var customOpts = {
      entries: ['./app/app.js'],
      debug: true
    };
    var opts = assign({}, watchify.args, customOpts);
    var b = watchify(browserify(opts));


    gulp.task('mainScripts', bundle);
    b.on('update', bundle);
    b.on('log', gutil.log);

    function bundle() {
      console.log('bundle');
      return b.bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(gulpif(!condition, sourcemaps.init({
          loadMaps: true
        })))
        .pipe(gulpif(!condition, sourcemaps.write('./')))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(gulpif(isLocal(), connect.reload()));
    }

“观看”任务

gulp.task('watch', function() {
  gulp.watch('app/**/*.js', ['mainScripts']);
});

Answer 1

watchify 和 gulp.watch 都在查找文件上的更改，这些更改会导致 bundle 创建时出现竞争条件。

您的监视任务应该刚刚开始您的 mainScripts 任务:

gulp.task('watch', function() {
  gulp.start('mainScripts');
});