Gulp监听文件夹时删旧添新导致崩溃，求原因及解决方案

问题根源 #

这个报错的核心原因是原生Gulp 3.x的gulp.watch底层依赖Node.js的fs.watch，它不会自动移除对已删除目录的监听。当你删除logos1后，watch任务仍然保留着对这个已不存在路径的监听条目，后续文件系统有变化时，它尝试访问这个消失的目录，就会抛出ENOENT（文件/目录不存在）错误。

解决方案 #

下面提供几个实用的解决办法，按推荐程度排序：

1. 使用gulp-watch插件替代原生watch

gulp-watch是专门优化过的监听插件，能自动处理目录的增删，动态更新监听列表，不会因为目录消失而崩溃。

步骤：

• 先安装插件：

npm install gulp-watch --save-dev

• 修改你的Gulp任务代码：

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

// 保持copy-images任务不变
gulp.task('copy-images', function() {
  return gulp.src([
    'images/*.{jpg,png,gif}',
    'images/**/*.{jpg,png,gif}',
    'node_modules/jquery-ui-bundle/images/*',
  ])
  .pipe(gulp.dest('dist/images/'))
})

gulp.task('watch', function () {
  // 用gulp-watch替换原生gulp.watch
  watch('images/**', function() {
    gulp.start('copy-images');
  });
})

2. 升级到Gulp 4.x

Gulp 4.x已经弃用了旧的watch实现，改用chokidar作为底层监听库，它能自动处理目录的创建、删除等变化，从根源上解决这个问题。

注意：升级后任务写法有变化，比如要用gulp.series或gulp.parallel来指定任务依赖：

// Gulp 4.x写法
const { src, dest, watch, series } = require('gulp');

function copyImages() {
  return src([
    'images/*.{jpg,png,gif}',
    'images/**/*.{jpg,png,gif}',
    'node_modules/jquery-ui-bundle/images/*',
  ])
  .pipe(dest('dist/images/'))
}

function watchTask() {
  watch('images/**', series(copyImages));
}

exports.copyImages = copyImages;
exports.watch = watchTask;

3. 给原生watch添加错误捕获

如果暂时不想升级或换插件，可以手动监听watch的错误事件，捕获ENOENT错误并处理：

gulp.task('watch', function () {
  const watcher = gulp.watch([ 'images/**' ], [ 'copy-images' ]);
  
  watcher.on('error', function(err) {
    // 只处理目录不存在的错误
    if (err.code === 'ENOENT') {
      console.log(`已忽略已删除目录的监听错误: ${err.path}`);
      // 可选：重启watch任务，确保新目录能被监听
      watcher.end();
      gulp.start('watch');
    } else {
      // 其他错误正常抛出
      throw err;
    }
  });
})

内容的提问来源于stack exchange，提问作者Run