3

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

1 回答 1

6

从 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()（这是因为它使用高级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因此，在任务期间写入的任何 .js文件lint都不会触发watcher. lint任务完成后，再次watcher启动。

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

于 2016-06-03T07:01:48.940 回答