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

我尝试使用 gulp 和 jscs 来防止代码异味。我还想使用手表，以便在进行更改时发生这种情况。我遇到的问题是 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']);
});

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

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

解决方案1

你需要停止gulp-jscs插件不会再次运行并再次写入文件，从而防止您遇到无限循环。要实现这一点，您所要做的就是添加gulp-cached https://github.com/contra/gulp-cached#usage给你的lint task:

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仅当有另一种方式时才运行。

解决方案2

首先你应该使用gulp-watch plugin https://www.npmjs.com/package/gulp-watch而不是内置的gulp.watch() https://github.com/gulpjs/gulp/blob/5944c1b/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb（那是因为它使用了优越的chokidar https://www.npmjs.com/package/chokidar图书馆而不是gaze https://www.npmjs.com/package/gaze).

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

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任务开始。任何.js期间写入的文件lint因此任务不会触发watcher。之后lint任务已经完成，watcher再次启动。

该解决方案的缺点是，如果您保存.js文件同时lint任务正在执行，更改不会被watcher（因为它已被停止）。你必须保存.js后的文件lint任务已完成（当watcher又开始了）。