Watch方法用于监视源文件.对源文件进行任何更改后,手表将运行适当的任务.您可以使用"默认"任务来监视对HTML,CSS和JavaScript文件的更改.
在上一章中您已经学习了如何使用默认任务吞咽组合任务.我们使用了gulp-minify-css,gulp-autoprefixer和gulp-concatplugins,并创建了样式任务来缩小CSS文件.
要查看CSS文件,我们需要更新'default'任务如下面的代码所示:
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文件,并且在对这些文件进行更改时,样式任务将被执行.
使用以下命令运行'default'任务.
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 终止监控过程并返回命令行.