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

Question

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

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

Answer 2

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

想法是将部分内容包含在任务 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'}))
  );
});

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

Browsersync doesn't detect changes on sass files in the subfolders

sass

gulp