gulp入门6:watch

当使用Gulp进行前端开发自动化时，gulp.watch 是一个非常有用的功能，用于监视文件或文件夹的变化，并在这些文件或文件夹发生变化时执行特定的任务。以下是关于 gulp.watch 的深入讲解：

1. gulp.watch 的基本用法

gulp.watch 的基本语法如下：

gulp.watch(glob[, opts], tasksFunction|tasksArray[, done]);

• glob: 要监视的文件匹配模式，与 gulp.src() 中的 glob 规则相同。
• opts: 可选的配置对象，通常不需要用到。
• tasksFunction|tasksArray: 文件变化后要执行的任务，可以是一个函数或一个任务数组。
• done: 可选的回调函数，当所有任务执行完成后调用。

例如：

gulp.watch('*.scss', gulp.series('sass', 'minify-css', 'reload'));

2. 监听文件变化并执行回调函数

除了执行任务外，你还可以为 gulp.watch 提供一个回调函数，该回调函数会在文件变化时被调用，并传入一个事件对象。这个事件对象包含了文件变化的相关信息，如变化类型（added, changed, deleted）和触发事件的文件路径。

gulp.watch('*.scss', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  // 在这里可以执行额外的逻辑
});

3. gulp.watch 的限制及解决方案

• 无法监听到新增加的文件：默认情况下，gulp.watch 无法监听到新增加的文件。为了解决这个问题，可以引入 gulp-watch 模块或其他相关插件。
• 只触发一次的问题：在某些情况下，gulp.watch 可能只会触发一次。这通常是由于Gulp版本或配置问题导致的。可以尝试更新Gulp版本或使用 gulp-watch 插件来解决这个问题。

4. 使用 gulp-watch 插件

gulp-watch 是一个独立的插件，它提供了比 gulp.watch 更强大的功能。使用 gulp-watch 可以解决 gulp.watch 的一些限制，如无法监听到新增加的文件或只触发一次的问题。

const gulp = require('gulp');
const watch = require('gulp-watch');

gulp.task('watch', function() {
  watch('**/*.scss', function(event, cb) {
    // 在这里执行你的任务
    // ...
    cb(); // 调用回调函数以通知gulp-watch任务已完成
  });
});

5. 总结

gulp.watch 是Gulp中非常实用的功能，用于监视文件或文件夹的变化并执行相应的任务。通过掌握其基本用法和限制，并结合 gulp-watch 插件，你可以更有效地使用Gulp进行前端开发自动化。