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文件。