GULP: Ändern Sie eine überwachte Datei an Ort und Stelle, ohne eine Endlosschleife zu verursachen

Question

Ich versuche, Schluck und Jscs zu verwenden, um Code-Geruch zu verhindern. Ich möchte auch watch verwenden, damit dies geschieht, wenn eine Änderung vorgenommen wird. Das Problem, auf das ich stoße, ist, dass jscs die Quelldatei ändert, die gerade angesehen wird. Dies führt zu großem Schluck in eine Endlosschleife von jscs zu gehen, um die Datei zu modifizieren und dann beobachten Sie die Änderung sehen und jscs abzufeuern wieder und wieder und wieder ...

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

Es ist generell eine schlechte Idee Quelldateien von einem außer Kraft zu setzen Schluckaufgabe. Alle Editoren/IDEs, in denen diese Dateien geöffnet sind, können dies möglicherweise nicht oder nicht korrekt handhaben. Es ist im Allgemeinen besser, die Dateien in einen separaten Ordner dist zu schreiben.

Dass gesagt wird hier zwei mögliche Lösungen:

Lösung 1

Sie müssen die gulp-jscs Plugin stoppen ein zweites Mal vom Laufen und die Dateien wieder zu schreiben, so dass die Endlosschleife zu verhindern du bist hineinrennen. Um dies zu erreichen alles, was Sie tun müssen, ist hinzuzufügen gulp-cached zu Ihrer lint Aufgabe:

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')); 
}); 

Die erste cache() stellt sicher, dass nur Dateien auf der Festplatte, die seit dem letzten Aufruf von lint durchlaufen werden geändert haben. Die zweite cache() stellt sicher, dass nur Dateien, die tatsächlich von jscs() behoben wurden auf die Festplatte an erster Stelle geschrieben werden. Der Nachteil dieser Lösung besteht darin, dass der Task lint noch zweimal ausgeführt wird. Dies ist keine große Sache, da während des zweiten Laufs die Dateien nicht tatsächlich gelöscht werden. gulp-cache verhindert dies. Aber wenn Sie unbedingt sicherstellen wollen, dass lint nur einmal ausgeführt wird, gibt es einen anderen Weg.

Lösung 2

Zuerst sollten Sie die gulp-watch plugin statt der gulp.watch() in integrierten verwenden (das ist, weil es die überlegene chokidar Bibliothek statt gaze verwendet).

Dann können Sie sich eine einfache pausableWatch() Funktion schreiben, und verwenden Sie diese in Ihrer watch Aufgabe:

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']); 
}); 

In der über dem watcher gestoppt wird, bevor die lint Task gestartet wird. Alle .js Dateien, die während der Task lint geschrieben werden, werden daher nicht die watcher auslösen. Nachdem die Task lint beendet wurde, wird die watcher erneut gestartet.

Der Nachteil dieser Lösung ist, dass, wenn Sie eine .js Datei speichern, während die lint Aufgabe ausgeführt wird, dass der Wandel wird nicht durch die watcher abgeholt werden (da sie gestoppt wurde). Sie müssen die .js Datei speichern, nachdem die lint Aufgabe beendet ist (wenn die watcher erneut gestartet wurde).