Gulp - 觀察

Watch 方法用於監視原始檔。當對原始檔進行任何更改時，Watch 會執行一個適當的任務。你可以使用“預設”任務來監視 HTML、CSS 和 JavaScript 檔案的更改。

更新預設任務

在前面的章節中，你已經瞭解瞭如何使用預設任務組合 Gulp 任務。我們使用了 gulp-minify-css、gulp-autoprefixer 和 gulp-concat 外掛，並建立 styles 任務來壓縮 CSS 檔案。

要觀察 CSS 檔案，我們需要按照以下程式碼所示更新“預設”任務

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

work/src/styles/ 資料夾下的所有 CSS 檔案都將受到觀察，並且在對這些檔案進行更改後，將執行 styles 任務。

執行預設任務

使用以下命令執行“預設”任務。

gulp

執行上述命令後，你將收到以下輸出。

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

每當對 CSS 檔案進行任何更改時，你都將收到以下輸出。

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

Watch 程序將保持活動狀態並響應你的更改。你可以按 Ctrl+C 終止監控程序並返回命令列。