Handling errors when working with SASS, Watch, Plumber and Gulp

When working with Gulp, you need to return streams as one of the days to set up task dependencies. Something like this:

gulp.task('sass', function() {  
    return gulp.src("sass/main.scss")
    .pipe(sass())
    .pipe(gulp.dest("css"))
});
view raw  

Now, if you are using some sort of a watch and want to catch errors with plumber, you are gonna have a problem. The problem is that if you return the stream, you won't be able to reset the watch when there is an error in your SASS. So, to solve it, you pass plumber a custom error handler:

.pipe(plumber(function(error) {
    gutil.log(gutil.colors.red(error.message));
    this.emit('end');
}))

And then you are good! Below is the a sample code for using SASS and BrowserSync:

gulp.task('sass', function() {  
    return gulp.src("sass/main.scss")
    .pipe(plumber(function(error) {
        gutil.log(gutil.colors.red(error.message));
        this.emit('end');
    }))
    .pipe(sass())
    .pipe(gulp.dest("css"))
    .pipe(reload({stream: true}));
});

Resources

https://github.com/floatdrop/gulp-plumber/issues/8