使用gulp配置的Browsersync无法检测sass子目录文件变更该如何解决

核心问题根因 #

当前配置失效的本质是增量过滤逻辑与依赖追踪插件的执行顺序冲突：

• 在gulp.src初始化阶段直接配置since: gulp.lastRun("sass")，只会读取自上次sass任务运行后，直接被修改过的sass根目录下的SCSS文件
• 当修改子目录下的partial文件时，sass根目录的入口SCSS本身没有改动，since参数会直接把所有入口文件全部过滤掉，导致管道内无文件流入
• 后续的dependents插件因为拿不到任何入口文件，无法解析依赖关系、找不到哪个入口引用了你修改的子目录partial，整个任务直接空跑，不会生成新的CSS，Browsersync自然收不到变更信号

具体修复步骤 #

• 第一步：移除gulp.src初始化阶段的since过滤参数，避免在依赖追踪前就把需要处理的入口文件过滤掉
  修正后的核心代码片段：

  gulp.task("sass", () => {
    return (
      // 移除src配置中的since参数，先读取所有sass根目录下的入口SCSS
      gulp.src([src_assets_folder + "sass/*.scss"])
        .pipe(debug({title: "sass-debug:"}))
        .pipe(sourcemaps.init())
        .pipe(plumber({errorHandler: onError}))
        // 先执行依赖解析，自动匹配出引用了已修改子文件的入口SCSS
        .pipe(dependents())
        // 移到此处补回增量过滤逻辑，保留编译性能：
        // 筛掉完全无关联的文件，只保留本身被修改、或是被追踪为依赖关联的入口文件
        .pipe(through.obj((file, enc, cb) => {
          const lastSassRunTime = gulp.lastRun("sass");
          // 首次运行时直接保留所有文件
          if (!lastSassRunTime) return cb(null, file);
          // 保留两类文件：文件本身在任务运行后被修改过、或是被dependents标记为关联文件
          if (file.stat.mtime >= lastSassRunTime || file.controlledByDependent) {
            cb(null, file);
          } else {
            cb();
          }
        }))
        .pipe(sass({ fiber: Fiber }))
        .pipe(autoprefixer())
        .pipe(minifyCss())
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(dist_folder))
        .pipe(browserSync.reload({ stream: true }))
    );
  });
  

  如果不需要极致的性能优化，甚至可以直接移除src阶段的since参数，不补写后续的增量过滤逻辑，配合dependents就可以正常工作——每次触发任务时读取所有根目录入口文件的开销，对中小型前端项目几乎可以忽略。

• 第二步：保持现有watch规则即可
  你当前配置的gulp.watch([src_assets_folder + 'sass/**/*.scss'], gulp.series("sass"))本身已经可以正确递归监听所有SCSS文件的修改，之前失效的原因只是sass任务本身空跑没有产出，调整完管道执行顺序后就能正常触发全流程编译。
• 注意：不需要修改gulp.src的通配符把所有子目录SCSS纳入编译范围。子目录下的SCSS一般是_开头的partial片段，本来就不应该单独生成CSS，当前仅匹配根目录SCSS的入口逻辑是完全正确的。

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates