Gulp speed up SASS compilation

Question

I'm using Gulp with livereload to compile my sass. Since I've added Compass to my build each time I make a change the sass task takes up to 5 seconds to complete.

I've read about various cache plugins such as gulp-cached but I can't get it to work. When I add gulp-cached the compliation times goes down to about 20ms and it only processes the changed sass partial but the rest of the sass task doesn't run.

Here is my SASS task

gulp.task('styles', function () {
    return gulp.src( paths.scss )
        .pipe( cache( 'sass' ) )
        .pipe( scss( options.scss ).on( 'error', gutil.log ) )
        .pipe( autoprefix( options.autoprefix ) )
        .pipe( gulp.dest( dests.css ) )
        .pipe( livereload() )
        .pipe( notify( { message: 'CSS task complete.' } ) );
});

And my full gulpfile can be found here: http://hastebin.com/oxuxegayoj.coffee

Should cache plugins work with sass compilation or is this how it should work?

Answer 1

The reason why you use cache in gulp is to not process files needlessly. If you have a task that fetches a folder of images and converts or compresses them, you don't want that to run for all images whenever you changed one. The cache plugins ensures this by just feeding through files that have changed.

This doesn't work with Sass or any other content where you concat a number of files into one as it will simply ignore unchanged files in the compiled result.

Sass does have it's own cache though, so the advantage of using gulp caching would be questionable even if it worked.