41

watch stops when error messages occur.

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
source string:51: error: invalid property name 

How I can keep watch running and just to tell me where is the error located.

grunt could deal with errors and doesn't need to stop,

styleSheet.scss:41: error: invalid property name

otherwise, I need to keep typing "gulp" in the command-line when an error occurs.

1
  • 2
    Have a look at this GitHub issue: it doesn't look like the team has reached a consensus on the topic yet. Jan 12, 2014 at 21:28

4 Answers 4

83

This answer has been appended to reflect recent changes to Gulp. I've retained the original response, for relevance to the OPs question. If you are using Gulp 2.x, skip to the second section


Original response, Gulp 1.x

You may change this default behavior by passing errLogToConsole: true as an option to the sass() method.

Your task might look something like this, right now:

gulp.task('sass', function () {
  gulp.src('./*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./'));
});

Change the .pipe(sass()) line to include the errLogToConsole: true option:

.pipe(sass({errLogToConsole: true}))

This is what the task, with error logging, should look like:

gulp.task('sass', function () {
  gulp.src('./*.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(gulp.dest('./'));
});

Errors output will now be inline, like so:

[gulp] [gulp-sass] source string:1: error: invalid top-level expression

You can read more about gulp-sass options and configuration, on nmpjs.org


Gulp 2.x

In Gulp 2.x errLogToConsole may no longer be used. Fortunately, gulp-sass has a method for handling errors. Use on('error', sass.logError):

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

If you need more fine-grained control, feel free to provide a callback function:

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass()
      .on('error', function (err) {
        sass.logError(err);
        this.emit('end');
      })
    )
    .pipe(gulp.dest('./css'));
});

This is a good thread to read if you need more information on process-control: https://github.com/gulpjs/gulp/issues/259#issuecomment-55098512

5
  • 7
    This should be set standard, No clue why you would make a watcher stop. Thank you! Nov 20, 2014 at 15:32
  • I encountered this using sass in ionic. It seems like this should be obvious default behaviour.
    – brad
    Nov 24, 2014 at 10:14
  • 1
    @Notflip I think this section of the docs talks to defaults — gulp-sass-specific-options. Looks like it default to use gutil pluginError, so you can do more complex error handling.
    – chantastic
    Nov 30, 2014 at 4:24
  • @brad I think this section of the docs talks to defaults — gulp-sass-specific-options. Looks like it default to use gutil pluginError, so you can do more complex error handling.
    – chantastic
    Nov 30, 2014 at 4:24
  • errLogToConsole is deprecated. See @dtohefp's answer.
    – Tarik
    Jul 13, 2015 at 21:23
11

Actually above anwsers doesn't work for me (Im using gulp-sass 3.XX). What really worked:

 gulp.task('sass', function () {
    return gulp.src(config.scssPath + '/styles.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'compressed' })
            .on('error', sass.logError)
        )
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.cssPath))
});

In gulp-sass 3.x.x when I was using "sass.logError(err);" I constantly recive error that "this.emit('end'); is not a function". Now when I'm using:

.pipe(sass({ outputStyle: 'compressed' })
    .on('error', sass.logError)
 )

everything is working like a charm

6

In gulp "^2.0.0" the option errLogToConsole will no longer work. Instead gulp-sass has a built in error logging callback that uses gulp-util under the hood. Also, because gulp has some problems with killing the process on errors, if you are using with watch you will have to call this.emit('end') https://github.com/gulpjs/gulp/issues/259#issuecomment-55098512

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

//dev
sass(config.sassDev)
  .on('error', function(err) {
     sass.logError(err);
       this.emit('end'); //continue the process in dev
     })
)

//prod
sass(config.sassProd).on('error', sass.logError)
2

A heads up for Gulp 3 users:

I liked @dtotheftp solution above, regarding gulp 2.x. Interestingly, it doesn't work unter Gulp3, at least not under @3.9.1:

.on('error', function(err){
    sass.logError(err);
    this.emit('end'); //continue the process in dev
})

gets me

TypeError: this.emit is not a function
    at Function.logError (/depot/myproject/node_modules/gulp-sass/index.js:181:8)

Note, that the complaint is not coming from his this.emit() in the gulpfile but rather from the sass node-module, hence from the prior line.

This works for me:

.on('error', function(err){
    gutil.log(err);
    this.emit('end');
})

I do get all errors², and the watch never ends ;) (I am also using plumber() right after gulp.src(), which might help with that).

(Yes, the fix might be highly illogical, since sass.logError is said to be based on gutil...)

²also on undefined macros which went silent before on my setup for whatever reason.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.