Watch task not continuing after error caught by Gulp-plumber has been fixed despite errorHandler callback

Question

So I got this neat gulpfile and all, and it's working smoothly except for this one thing.

I'm running gulp-plumber to stop the watch task from crashing on an error, the error is getting caught by it but then when I fix the error, the watcher refuse to continue. I added the handleError callback but it doesn't appear to do anything even though this article says that it should. This is driving me to insanity because I know people who has gotten it working without any of these but none of the solutions I've found seems to work. Have I missed something?

EDIT: When I have an error in _lists.scss for example the error thrown looks like this:

[22:04:43] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
styles\partials\_lists.scss
1:1  invalid top-level expression

Does this mean that I also have to handle the error manually using on.('error', function() {})? Because I thought this was plumber purpose, to remove the manual error handling. I even tried manually catching the error using this but it just spit out the error in the console and refused to continue just like before.

Here's the plumber pipe part:

// Compile our SCSS into minified CSS
gulp.task('styles', function() {
  return gulp.src('styles/main.scss')
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Finished compiling SCSS' }))
});

And here's the whole gulpfile.js:

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss    = require('gulp-minify-css'),
    plumber      = require('gulp-plumber'),
    jshint       = require('gulp-jshint'),
    uglify       = require('gulp-uglify'),
    imagemin     = require('gulp-imagemin'),
    rename       = require('gulp-rename'),
    concat       = require('gulp-concat'),
    notify       = require('gulp-notify'),
    cache        = require('gulp-cache'),
    livereload   = require('gulp-livereload'),
    htmlmin      = require('gulp-htmlmin'),
    del          = require('del');

// Minify our HTML
gulp.task('html', function() {
  return gulp.src('*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'))
});

// Compile our SCSS into minified CSS
gulp.task('styles', function() {
  return gulp.src('styles/main.scss')
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Finished compiling SCSS' }))
});

// Concat and compile our JS into a minified file
gulp.task('scripts', function() {
  return gulp.src('scripts/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Finished compiling scripts' }));
});

// Compress our images
gulp.task('images', function() {
  return gulp.src('images/**/*.js')
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Finished compiling images' }));
});

// Clean/empty our dist folder
gulp.task('clean', function(cb) {
  del(['dist/styles', 'dist/scripts', 'dist/images'], cb)
});

// Run all our tasks when using 'gulp' command in CLI
gulp.task('default', ['clean'], function() {
  gulp.start('html', 'styles', 'scripts', 'images');
});

// Watch our files for changes
gulp.task('watch', function() {
  gulp.watch('styles/**/*.scss', ['styles']);
  gulp.watch('scripts/**/*.js', ['scripts']);
  gulp.watch('images/**/*', ['images']);
});

Answer 1

It might be just a typo.

Try replacing handleError with errorHandler.

Answer 2

Exact same issue, just worked it out. The charm is to add

this.emit('end');

at the end of your handler to gracefully end the task.