Schlucken - Beobachten

Die Watch-Methode wird verwendet, um Ihre Quelldateien zu überwachen. Wenn Änderungen an der Quelldatei vorgenommen werden, führt die Uhr eine entsprechende Aufgabe aus. Mit der Standardaufgabe können Sie nach Änderungen an HTML-, CSS- und JavaScript-Dateien suchen.

Standardaufgabe aktualisieren

Im vorherigen Kapitel haben Sie gelernt, wie Sie das Kombinieren von Aufgaben mit der Standardaufgabe schlucken . Wir haben gulp-minify-css, gulp-autoprefixer und gulp-concatplugins verwendet und eine Stilaufgabe zum Minimieren von CSS-Dateien erstellt.

Um die CSS-Datei anzusehen, müssen wir die 'Standard'-Aufgabe wie im folgenden Code gezeigt aktualisieren:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

Alle CSS-Dateien unter work/src/styles/ Der Ordner wird überwacht und bei Änderungen an diesen Dateien wird die Stilaufgabe ausgeführt.

Führen Sie die Standardaufgabe aus

Führen Sie die Standardaufgabe mit dem folgenden Befehl aus.

gulp

Nach Ausführung des obigen Befehls erhalten Sie die folgende Ausgabe.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

Immer wenn Änderungen an CSS-Dateien vorgenommen werden, erhalten Sie die folgende Ausgabe.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

Der Überwachungsprozess bleibt aktiv und reagiert auf Ihre Änderungen. Sie können drückenCtrl+Cum den Überwachungsprozess zu beenden und zur Befehlszeile zurückzukehren.