Gulp - Guarda

Il metodo Watch viene utilizzato per monitorare i file di origine. Quando vengono apportate modifiche al file di origine, l'orologio eseguirà un'attività appropriata. Puoi utilizzare l'attività "predefinita" per controllare le modifiche ai file HTML, CSS e JavaScript.

Aggiorna attività predefinita

Nel capitolo precedente hai imparato come inghiottire le attività combinate utilizzando l' attività predefinita. Abbiamo usato gulp-minify-css, gulp-autoprefixer e gulp-concatplugins e abbiamo creato attività di stili per minimizzare i file CSS.

Per guardare il file CSS, dobbiamo aggiornare l'attività "predefinita" come mostrato nel codice seguente:

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

Tutti i file CSS in work/src/styles/ verrà controllata e dopo le modifiche apportate a questi file, verrà eseguita l'attività di stili.

Esegui attività predefinita

Esegui l'attività "predefinita" utilizzando il seguente comando.

gulp

Dopo aver eseguito il comando precedente, riceverai il seguente output.

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

Ogni volta che vengono apportate modifiche ai file CSS, riceverai il seguente output.

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

Il processo Watch rimarrà attivo e risponderà alle modifiche. Puoi premereCtrl+Cper terminare il processo di monitoraggio e tornare alla riga di comando.