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 终止监控进程并返回命令行。