GULP：修改一个监视文件，而不会导致无限循环

Question

我试图使用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']);
});

Answer 1

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

这就是说这里有两个可能的解决方案：

解决方案1

您需要停止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任务仍在执行两次。 这不是什么大问题，因为在第二次运行期间文件实际上并没有被linted。 gulp-cache可以防止这种情况发生。 但是如果你绝对想要确保lint只运行一次，那就是另一种方式。

解决方案2

首先你应该使用gulp.watch() gulp-watch插件而不是内置的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文件。