Watch all files with gulp?

Question

Currently i have folder stucture like below.

• css
  • scss
    • _icon.scss
    • _admin.scss
  • main.scss
  • personal.scss
• modules
  • directives
    • map
      • map.html
      • map.scss
      • map.js

I have gulp sass with following

gulp.task("sass", function() {
    return gulp.src('css/main.scss') // location of main scss file name
        .pipe(sourcemaps.init()) //TODO: important, comment out this line in staging and production
        //.pipe(rename({suffix: '.min'})) // include this to rename the file to fileName.min.css
        //.pipe(minifycss()) // include this to minify the file
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sourcemaps.write()) //TODO: important, comment out this line in staging and production
        .pipe(concat("main.min.css"))
        .pipe(gulp.dest('./css'));
});

I want to watch all files with extension .scss in my root directory when there are any changes.

Answer 1

If your 'sass' task compiles it correctly, then you just need a watch task to run that task automatically.

gulp.task('watch', function() {
    gulp.watch(['./**/*.scss'], ['sass'])
});

Make it run automatically when you run gulp by adding it to a 'default' task ....

gulp.task('default', ['sass', 'watch'])

https://gulpjs.com/

Answer 2

I've made a gulp plugin to allow incremental caching with node sass.

give it a try: https://github.com/hitmands/gulp-sass-pedigree