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

Question

I have a gulp task to build css files from sass files as following:

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"));

The sass files I'm building are the ones found immediately under sass folder and not all the files that are in the sass subfolders, but my watcher is on all the files inside the sass folder recursivly.

The problem I'm having is that when Browsersync is up, and then I update a sass file that is not found immediately under sass folder, Browsersync doesn't detect any changes, but when I update a sass file that is found immediately under sass folder, Browsersync detects the changes.

How can I solve that?

Answer 1

Finally I found a solution on how to fix my issue.

The idea is to include the partials in the task src and then filter them to prevent building them.

The final solution looks like this:

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

This seems to be related to the since option of src(). With that option enabled, that task doesn't create any Vinyl objects to pipe unless there are detectable changes in the files immediately under sass folder since the last time the task was run. Removing that option should fix the issue.