I've been banging my head to get gulp-notify, gulp-plumber, and gulp-sass working for a few hours. The build works fine, but I'm struggling to get error notifications to play nice. What I want is:

1. OS notification that an error occurred
2. Error reported in the console
3. Watch task does not stop

It feels like none of the modules want this to happen.

First Attempt

I tried these .onError commands directly in the task stream, but that stops the watcher:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(sass())

    // First try
    .on('error', function () {
        notify({
            title: 'Gulp: CSS',
            message: 'Error'
        })
    })

    // Second try
    .on('error', notify.onError({
        title: 'Gulp: CSS',
        message: 'Error'
    }))

    // Third try
    .on('error', function (err) {
        return notify().write({
            title: 'Gulp: CSS',
            message: 'Error'
        });
    })
});

Note: I found all these different syntaxes in gulpfiles from others, but with no real explanations of why they should be used.

Second Attempt

Then I tried using gulp-sass callback for onError:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(sass({
        errLogToConsole: false,
        onError: notify.onError({
            title: 'Gulp: CSS',
            message: 'Error'
        })
    }))
});

But setting errLogToConsole: false means you can't see the error. Changing to true means the watcher stops.

Third Attempt

Then I tried I'm using gulp-plumber so the watcher doesn't stop.

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(plumber({
        errorHandler: reportError
    }))
    .pipe(sass())
    .on('error', reportError)
});

With the error handling function:

function reportError (error) {
    notify().write({
        title: 'Gulp: CSS',
        message: 'Error'
    });

    console.log(error.toString());
}

This sort of works, but notify.write() ignores the title property passed in. I couldn't find any docs for this.

The watcher breaks but doesn't stop. Correcting the CSS error and saving has no effect.

Even if that did work, the error handler would be hardcoded for the CSS task. I'm trying to re-use this for JS too.

Fourth Attempt

Then I tried to rewrite the second attempt to be self-contained and not rely on gulp-plumber with an anonymous function for error reporting + notification:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(sass({
        errLogToConsole: false,
        onError: function (err) {
            console.log(err);        
            notify().write({
                title: 'Gulp: CSS',
                message: 'Error'
            });
        }
    }))
});

This technically does all three things I want:

1. OS notification that an error occurred (but not nicely formatted)
2. Error reported in the console
3. Watch task does not to stop (and stays functional)

But it means I need another workaround for JS (or other tasks that may need error handling).

What am I missing here?

There has to be a better way.