Gulp-sass error with notify

Question

I wondered if there is a way to have notify display a message on gulp-sass error. preferably the actual message that is displayed in the console.

my gulp task looks like this:

gulp.task('styles', function() {
  return gulp.src('src/scss/style.scss')
    .pipe(sass({ style: 'compressed', errLogToConsole: true }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest(''))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Styles task complete' }));
});

I'd like to pipe the notify to some kind of error callback.

Any help appreciated.

Solution 1

After struggling with this myself I found that this worked:

gulp.task('styles', function() {
  return gulp.src('src/scss/style.scss')
    .pipe(sass({
        style: 'compressed',
        errLogToConsole: false,
        onError: function(err) {
            return notify().write(err);
        }
    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest(''))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Styles task complete' }));
});

You need to catch the error using the onError option that gulp-sass provides.

Hope that helps!

Solution 2

I'm a little late to the party here but the issue I was having was that the sass would stop compiling if there was an error in the code and I would have to restart gulp. Here is what I ended up doing:

gulp.task('sass', function() {
    return gulp.src('assets/scss/style.scss')
        .pipe(sass({ errLogToConsole: false, }))
        .on('error', function(err) {
            notify().write(err);
            this.emit('end');
        })
        .pipe(gulp.dest('assets/css'))
        .pipe(notify({ message: 'SCSS Compiled' }));
});

In my case I had to add this.emit('end');

Solution 3

With gulp-sass v2.0.4, this works:

.pipe(sass())
.on('error', notify.onError(function (error) {
   return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
}))

Comments

[joemaller]

Worth adding: .pipe(sass(...).on('error', function() {...}) is not equivalent. It will catch the error but Sass won't run after the first error.

[Alex Baulch]

Great point, that was what I initially tried but forgot to mention that here.

[mikaelb]

I think you can use { onError: notify.onError('<%= error.message %>') } and have sass continue to run after the first error.

[Bradley Flood]

For further reading see the gulp-sass docs here

[Zachary Dahan]

This solution worked for me with gulp-sass 2.0.4, when the accepted answer didn't worked with the latest version.

[Jake Wilson]

I don't see anything about an onError handler in gulp-sass docs or node-sass docs. Where is this coming from?

[Frank Nocke]

...as for the stopping, you can use .pipe(plumber()) from gulp-plumber'right after gulp.src()`.[What I am struggling with, is that I only see the first error, and only if that file just changed...]

[Jon z]

@JakeWilson I think their API must have changed, this whole thread is out of date.