Watch for changes in subdirectories but target a single file as src in Gulp

0
votes

I have the following gulp task:

gulp.task("stylePipe", function(){

  var postcssPlugins = [
    autoprefixer({browsers: ['last 2 version']}), // autoprefixer
    cssnano() // css minifier
  ];

  gulp.src("src/sass/*.scss") 
  .pipe(sourcemaps.init())
  .pipe(plumber())
  .pipe(sass().on("error", sass.logError)) // scan for errors
  .pipe(postcss(postcssPlugins)) // runs postcss plugins listed above
  .pipe(rename({ extname: '.min.css' }))
  .pipe(sourcemaps.write('maps'))
  .pipe(gulp.dest("dist/css")); // compile into dist

});

gulp.task("styleWatch", ["stylePipe"], browsersync.reload);

gulp.task("watch", function(){

  browsersync({
    server: {
      baseDir: "dist/"
    }
  });

  gulp.watch("src/sass/*.scss", ["styleWatch"]);
});

I want to watch for changes in all the subdirectories listed below

enter image description here

using only the main.scss as src in the gulp.src("src/sass/*.scss") (main.scss is the only file that should be preprocessed whenever there is a change in the subdirectories' files).

How can I accomplish this?

1
gulpgulp-watchgulp-sass

1 Answers

0
votes

I simply modified 

  gulp.watch("src/sass/*.scss", ["styleWatch"]);

into 

  gulp.watch("src/sass/**/*.scss", ["styleWatch"]);