Gulp & Sass: keep your task running

So you're using gulp-sass to compile your Sass files but every time your code contains an error Gulp stops. After fixing the error you find yourself manually restarting the Gulp process. Here's a little tip to avoid that and keep Gulp running.

For the sake of simplicity let's say your Gulp config looks like this:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function () {
    gulp.src('./sass/**/*.scss')
    .pipe(sass({
        outputStyle: 'compressed'
    }))
    .pipe(gulp.dest('./css'));
});

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

Let's change the styles task by catching the error using the onError option that gulp-sass provides:

//...

gulp.task('styles', function () {
    gulp.src('./sass/**/*.scss')
    .pipe(sass({
        outputStyle: 'compressed',
        onError: function(err) {
            return console.log(err);
        }
    }))
    .pipe(gulp.dest('./css'));
});

//...

There we go! Gulp will now keep running if it finds an error and recompiles after the error has been fixed without you manually restarting Gulp.

comments powered by Disqus