📌  相关文章
📜  Gulp-Watch

📅  最后修改于: 2020-10-25 14:12:38             🧑  作者: Mango

 

Watch方法用于监视源文件。对源文件进行任何更改后，手表将运行适当的任务。您可以使用“默认”任务来监视HTML，CSS和JavaScript文件的更改。

更新默认任务

在上一章中，您学习了如何使用默认任务吞并任务。我们使用了gulp-minify-css，gulp-autoprefixer和gulp-concatplugins，并创建了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

监视过程将保持活动状态并响应您的更改。您可以按Ctrl + C终止监视过程并返回命令行。