Question

我有一个Gulp任务，wire将应用程序JavaScript注入index.html。

我想要另外一个Gulp任务，watch，监视JavaScript文件的更改，如果添加了新文件，则运行wire 或现有文件已删除。

以下任务完成此过程：

gulp.task('wire', function () {
    var injectScripts = gulp.src('src/app/**/*.js');

    return gulp.src(path.join(conf.paths.base, 'index.html'))
        .pipe($.inject(injectScripts, {}))
        .pipe(gulp.dest(path.join(conf.paths.base)));
});

gulp.task('watch', function () {
    var watcher = gulp.watch(path.join(conf.paths.src, '/app/**/*.js'));

    watcher.on('change', function (ev) {
        if (ev.type === 'added' || ev.type === 'deleted') {
            gulp.run('wire');
        }
    });
});

不幸的是，看起来此方法已弃用。运行时，我会在控制台中收到弃用通知：

gulp.run（）已被弃用。使用任务依赖项或gulp.watch 相反，任务触发。

当我将gulp.run()与gulp.start()交换（似乎几乎没有文档）时，对index.html的文件更改滞后（它们需要几分钟才能完成，这很奇怪）。

显然，我可以将watch任务更改为只在JavaScript文件发生更改时运行wire，而不是根据事件类型进行过滤，但这似乎是浪费不必要的处理来运行{{} 1}}当现有文件发生变化时：

wire

建议的Gulp策略是什么？

Answer 1

在this link

中查看对此的长期讨论

var wire = function() {
  var injectScripts = gulp.src('src/app/**/*.js');

  return gulp.src(path.join(conf.paths.base, 'index.html'))
      .pipe($.inject(injectScripts, {}))
      .pipe(gulp.dest(path.join(conf.paths.base)));
};

gulp.task('wire', function () {
    wire();
});

gulp.task('watch', function () {
    var watcher = gulp.watch(path.join(conf.paths.src, '/app/**/*.js'));

    watcher.on('change', function (ev) {
        if (ev.type === 'added' || ev.type === 'deleted') {
            wire();            
        }
    });
});

Gulp监视文件添加和删除

1 个答案: