基础用法

watch()函数用于监听文件系统中的文件变化，并在检测到变化时运行指定的任务。你可以监听一个或多个文件模式（globs），并为它们指定一个任务函数或组合任务。

监听文件变化

首先，定义一个简单的任务函数，比如编译JavaScript：

const {
    
     watch } = require('gulp');

function javascript(cb) {
    
    
  console.log('Compiling JavaScript...');
  // 执行JavaScript编译操作
  cb(); // 任务完成，没有错误
}

// 监听JavaScript文件的变化
watch('src/**/*.js', javascript);

在这个例子中，watch()函数监听src目录下所有.js文件的变化，并在文件变化时运行javascript任务。

使用选项自定义监听行为

watch()函数接受一个可选的options对象，允许你自定义监听行为。比如，你可以设置延迟、事件类型、忽略的文件等。

watch('src/**/*.js', {
    
     delay: 500, events: ['change', 'add'] }, javascript);

在这个例子中，delay选项设置为500毫秒，意味着在文件变化后500毫秒才会触发任务，这有助于避免频繁的文件变化导致任务频繁触发。events选项指定了要监听的事件类型，这里只监听了change和add事件。

使用Chokidar实例进行细粒度控制

watch()函数返回一个Chokidar实例，这是一个强大的文件监听库。你可以使用这个实例来注册自定义的事件处理程序，或者对监听设置进行更细粒度的控制。

const watcher = watch('src/**/*.js');

watcher.on('change', function(path, stats) {
    
    
  console.log(`File ${
      
      path} was changed`);
});

watcher.on('add', function(path, stats) {
    
    
  console.log(`File ${
      
      path} was added`);
});

// 当不再需要监听时，可以关闭监听器
// watcher.close();

在这个例子中，我们注册了change和add事件的处理程序，当这些事件发生时，会打印相应的消息。

高级用法

监听多个文件模式

你可以同时监听多个文件模式，并为它们指定相同的任务：

watch(['src/**/*.js', 'src/**/*.css'], javascript);

使用组合任务

你还可以将watch()函数与series()和parallel()函数结合使用，创建更复杂的任务组合：

const {
    
     series, watch } = require('gulp');

function clean(cb) {
    
    
  console.log('Cleaning project...');
  // 执行清理操作
  cb();
}

function build(cb) {
    
    
  console.log('Building project...');
  // 执行构建操作
  cb();
}

// 创建一个组合任务
const buildTask = series(clean, build);

// 监听文件变化并运行组合任务
watch('src/**/*.js', buildTask);

动态添加或移除监听

使用Chokidar实例的add()和unwatch()方法，你可以在运行时动态地添加或移除监听的文件模式：

const watcher = watch('src/**/*.js');

// 动态添加新的监听
watcher.add('src/**/*.css');

// 动态移除监听
watcher.unwatch('src/**/*.js');

结论

watch()函数是Gulp中一个非常强大的功能，它允许你在文件变化时自动执行任务，从而极大地提高了开发效率。通过合理使用watch()函数及其选项，你可以创建出高效、灵活的自动化构建流程。希望这篇教程能帮助你更好地理解和使用Gulp中的watch()函数。