Browsersync 未检测到子文件夹中 sass 文件的更改

Question

我有一个从 sass 文件构建 css 文件的 gulp 任务，如下所示：

gulp.task("sass", () => {
  return (
    gulp.src([
      src_assets_folder + "sass/*.scss"
      ], {
        since: gulp.lastRun("sass"),
      })
      .pipe(debug({title: "sass-debug:"}))
      .pipe(sourcemaps.init())
      .pipe(plumber({errorHandler: onError}))
      .pipe(dependents())
      .pipe(sass({ fiber: Fiber }))
      .pipe(autoprefixer())
      .pipe(minifyCss())
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest(dist_folder))
      .pipe(browserSync.reload({ stream: true }))
  );
});
gulp.watch([src_assets_folder + 'sass/**/*.scss'], gulp.series("sass"));

我正在构建的 sass 文件是直接在 sass 文件夹下找到的文件，而不是 sass 子文件夹中的所有文件，但我的观察者递归地在 sass 文件夹中的所有文件上。

我遇到的问题是，当 Browsersync 启动时，然后我更新了一个在 sass 文件夹下没有立即找到的 sass 文件，Browsersync 没有检测到任何更改，但是当我更新一个找到的 sass 文件时在 sass 文件夹下，Browsersync 会立即检测到更改。

我该如何解决？

Answer 1

我终于找到了解决问题的方法。

想法是在任务 src 中包含部分内容，然后过滤它们以防止构建它们。

最终的解决方案是这样的：

gulp.task("sass", () => {
  const partials = readdirSync(src_sass_folder, { withFileTypes: true })
    .filter(dirent => dirent.isDirectory())
    .map(dirent => `!${src_sass_folder + dirent.name}/**/*.scss`);
  return (
    gulp.src([
        src_sass_folder + "*.scss",
        src_sass_folder + "**/*.scss"
      ], {
        since: gulp.lastRun("sass"),
      })
      .pipe(dependents())
      .pipe(filter(['**'].concat(partials))) // =====================> HERE
      .pipe(debug({title: "sass-debug:", showCount: false}))
      .pipe(sourcemaps.init())
      .pipe(plumber({errorHandler: onError}))
      .pipe(sass({ fiber: Fiber }))
      .pipe(autoprefixer())
      .pipe(minifyCss())
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest(dist_folder + "Content"))
      .pipe(browserSync.stream({match: '**/*.css'}))
  );
});

Answer 2

这似乎与src() 的since 选项有关。启用该选项后，该任务不会创建任何 Vinyl 对象以进行管道传输，除非自上次运行任务以来 sass 文件夹下的文件中存在可检测到的更改。删除该选项应该可以解决问题。