Gulp 观看
Watch 方法用于监控您的源文件。当对源文件进行任何更改时,watch 将运行相应的任务。您可以使用"默认"任务来监视 HTML、CSS 和 JavaScript 文件的更改。
更新默认任务
在上一章中,您已经学习了如何使用默认任务gulp 合并任务。我们使用了 gulp-minify-css、gulp-autoprefixer 和 gulp-concatplugins,并创建了样式任务来缩小 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 文件都将被监视,并在对这些文件进行更改时执行样式任务。
运行默认任务
使用以下命令运行"默认"任务。
执行上述命令后,您将收到以下输出。
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
监视过程将保持活动状态并响应您的更改。您可以按
Ctrl+C终止监控进程并返回命令行。