GULP:就地修改监视文件而不会导致无限循环

Question

我正在尝试使用 gulp 和 jscs 来防止代码异味。我还想使用 watch ，以便在进行更改时发生这种情况。我遇到的问题是 jscs 是修改正在观看的源文件。这导致 gulp 进入 jscs 修改文件的无限循环，然后一次又一次地观察更改并触发 jscs ...

const gulp = require('gulp');

gulp.task('lint', function() {
    return gulp.src('/src/**/*.js')
        .pipe(jscs({
            fix: true
        }))
        .pipe(jscs.reporter())
        .pipe(gulp.dest('/src'));
});

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

Answer 1

从 gulp 任务中覆盖源文件通常不是一个好主意。任何打开这些文件的编辑器/IDE 可能会或可能不会妥善处理。通常最好将文件写入单独的 dist 文件夹。

话虽如此，这里有两种可能的解决方案:

解决方案一

您需要停止 gulp-jscs 插件第二次运行并再次写入文件，从而防止您遇到无限循环。为此，您只需添加 gulp-cached到您的 lint 任务:

var cache = require('gulp-cached');

gulp.task('lint', function() {
  return gulp.src('/src/**/*.js')
    .pipe(cache('lint'))
    .pipe(jscs({
        fix: true
    }))
    .pipe(cache('lint'))
    .pipe(jscs.reporter())
    .pipe(gulp.dest('/src'));
});

第一个 cache() 确保只有自上次调用 lint 以来磁盘上发生更改的文件才能通过。第二个 cache() 确保只有真正被 jscs() 修复的文件首先写入磁盘。

这个解决方案的缺点是 lint 任务仍然被执行了两次。这没什么大不了的，因为在第二次运行期间，文件实际上并没有被检查。 gulp-cache 可以防止这种情况发生。但是，如果您绝对想确保 lint 只运行一次，还有另一种方法。

方案二

首先你应该使用 gulp-watch plugin而不是内置的 gulp.watch() (那是因为它使用高级 chokidar 库而不是 gaze )。

然后您可以自己编写一个简单的pausableWatch() 函数并在您的watch 任务中使用它:

var watch = require('gulp-watch');

function pausableWatch(watchedFiles, tasks) {
  var watcher = watch(watchedFiles, function() {
    watcher.close();
    gulp.start(tasks, function() {
      pausableWatch(watchedFiles, tasks);
    });
  });
}

gulp.task('watch', function() {
  pausableWatch('/src/**/*.js', ['lint']);
});

在上面，watcher 在 lint 任务开始之前停止。因此，在 lint 任务期间写入的任何 .js 文件都不会触发 watcher。 lint 任务完成后，watcher 再次启动。

此解决方案的缺点是，如果您在执行 lint 任务时保存 .js 文件，则 不会获取更改watcher (因为它已被停止)。 lint 任务完成后(当 watcher 再次启动时)，您必须保存 .js 文件。