Watch/recompile only changed sass/scss files

Hi, This question might be already answered, but i couldn’t find the answer. Recently I switch from Compass SASS to Gulp-sass. So, is it possible with the Watcher to recompile only changed SCSS files? I have huge amount of SCSS files (~60) so it takes around 7-8sec every time I change ONE file. Here is my task and watcher

sassSources = ['../sass/**/*.scss'];

gulp.task('sass', function() {
    return gulp.src(sassSources)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('resources/css'));
});

gulp.task('watch', function() {
    gulp.watch(sassSources, ['sass'])
    .on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

Any help is appreciated !

Thanks !

[venelinn]

I found a solution. You need to install the following: gulp-sass-grapher path gulp-watch

And this is the working task:

gulp.task('watch-sass', function() {
    var loadPaths = path.resolve('../sass/');
    sassGrapher.init('../sass/', { loadPaths: loadPaths });
    return watch('../sass/**/*.scss', { base: path.resolve('../sass/') })
      .pipe(sassGrapher.ancestors())
      .pipe(sass({
        includePath: loadPaths
      }))
      .pipe(autoprefixer(autoprefix))
      .pipe(gulp.dest('./resources/css'));
  });

Good luck !

[yoiang]

Haha wow, that’ll do it too, thanks 😃

It would be nice to have this as a gulp-sass one-step option!