Gulp4配置watch任务仅校验修改文件并执行series流程

你当前的问题在于：在watch的all回调里，仅定义了series(compileCSS, reload)但没有执行它，而且lintCSS(path)是异步任务，没有等待它完成就继续，导致后续流程没触发。下面是可行的解决方案：

1. 改造Lint函数支持单文件处理 #

首先确保你的lintCSS函数可以接收单个文件路径参数，实现“传参则校验单个文件，不传则校验全部”的逻辑：

function lintCSS(filePath) {
  // 优先使用传入的单文件路径，否则用全局SCSS路径
  const targetFiles = filePath ? filePath : config.path.scss;
  
  return gulp.src(targetFiles)
    .pipe(stylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
      // 其他你的stylelint配置
    }));
}

2. 正确链式执行异步任务 #

在watch回调中，需要将单文件lint、compile、reload包装成Gulp可识别的异步任务序列，并主动执行这个序列：

function watchCSS() {
  return watch(config.path.scss).on('all', function(event, path) {
    console.log('Modified: ' + path);
    
    // 把单文件lint包装成符合Gulp任务格式的函数（支持异步完成）
    const lintSingleFile = (done) => {
      lintCSS(path).on('end', done);
    };
    
    // 执行series任务序列：lint单个文件 → 编译CSS → 重载
    series(lintSingleFile, compileCSS, reload)();
  });
}

关键说明 #

• Gulp的series()返回的是一个任务函数，必须通过()调用才会执行
• 异步任务（比如lint、编译）需要通过返回流、Promise或调用done回调来通知Gulp任务完成，否则后续任务不会触发
• 包装lintSingleFile是为了把带参数的lintCSS(path)转换成Gulp任务期望的无参/带done的形式

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