Gulp-sass: Gulp crashes when there's an error in my sass files

[kevinSuttle]

It would be great to avoid having to restart gulp every time I make a typo in my sass file. Is it something I can work around?

[prestyman]

If you pass errLogToConsole: true into the options hash, sass errors will be logged to the console. Use this option with gulp.watch to keep gulp from stopping every time you make a typo in your sass file.

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

[kevinSuttle]

I added .pipe(sass({errLogToConsole: true})) and it no longer crashes, but the errors are not logged to the console.

[samvasko]

@kevinSuttle

I am using:

gulp.task('scss', function() {
    gulp.src('sources/scss/main.scss')
        .pipe(sass())
        .on('error', gutil.log)
        .pipe(gulp.dest('./public/css'));
});

It looks fine but the errors are not really well structured

{ plugin: 'gulp-sass',
  showStack: undefined,
  name: 'Error',
  message: 'sources/scss/forms:20: error: error reading values after display\n',
  fileName: undefined,
  lineNumber: undefined }

[rottmann]

use gulp-plumber to handle errors

gulp.task('scss', function() {
    gulp.src('sources/scss/main.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('./public/css'));
});

[patrickmarabeas]

errLogToConsole: true does not work when used with sourceComments: 'map'.

[hotmeteor]

@rottmann Thanks, that's awesome.

[DESIGNfromWITHIN]

Thanks @rottmann Love gulp-lumber. Great tip

[lekhnath]

what a cool name gulp-plumber for preventing pipe breaking . Awesome name and awesome work. Thanks for letting know about it.

[jialezhang]

nice gulp-plumber!

[lukehatfield]

@rottmann thank you--better workflow now.

[wwwebman]

@rottmann thanks a lot you awesome!

[Vitegor]

thanks, gulp-plumber is nice thing!

[WuglyakBolgoink]

plumber without sass({errLogToConsole: true}) doesn't work correct, crashed if found error in sass file...

[kevin-romens]

@rottmann it's cool thanks

[huyle2607]

@rottmann How can I use gulp-plumber and browerSync together. It's always crashed when there was a error in sass file whether I installed gulp-plumber or not. Please help me with this one!

[LandonSchropp]

I'm also the error with sourceComments. Using plumber doesn't seem to help.

[CalebBarnes2]

Hmm. I tried using gulp-plumber with browsersync and gulp-sass.. It throws the error, doesn't crash the server, but it stops watching my files for changes..

gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

[martemorfosis]

@calebbarnes This worked for me:

gulp.task('sass', function() {
    return gulp.src("./scss/*.scss")
        .pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .on('error', catchErr)
        .pipe(gulp.dest("./css"))
        .pipe(browserSync.stream());
});


function catchErr(e) {
  console.log(e);
  this.emit('end');
}

[igor-kovalenko]

Hello. I can't figure out how I can use this.emit('end') inside of bs-config.js file, because i'm using browser-sync without gulp and it crashes when watching files contain error. Thank you!

[generalov]

Usually gulp-sass stops files processing after an error occured. So some files that do not have any error may remain uncompiled. The gulp-flatmap can be used to handle errors per-file so each file takes a chance to be processed.

var sourcemaps = require('gulp-sourcemaps');
var gulpFlatmap = require('gulp-flatmap');

gulp.task('sass', function () {
 return gulp.src('./sass/**/*.scss')
  .pipe(gulpFlatmap(function (stream) {  // the stream contains a single file 
     return stream
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(sourcemaps.write('./maps'))
  })
  .pipe(gulp.dest('./css'));
});

[ta-riq]

guys, i found this solution.
Just see this image below. As i'm very lazy at typing a solution. 🥇

[generalov]

@ta-riq Emitting the 'end' event prevents gulp crashing in case of an 'error' event has occured. It's a fine solution if you really expect to process files with SASS compiler until a first error.

For example, let's a folder contains three files: bad.scss, good1.scss, and good2.scss. The good2.scss has changed and the bad.scss has an error. Which files will be processed to the dest?

It depends on the order in which gulp.src() emits the files. If bad.scss is emitted the first then no any file will be processed because the pipe receives the 'end' event immediately. So you will not see good2.scss changes nor in the dest folder nor in the browser. If gup.src() emits files in some other order [good2.sass, bad.sass, good1.sass] or [good1.sass, bad.sass, good2.sass] then just a single file will be compiled. But the result is not predictable. Some styles will be updated and some will not.

Since a error event has occurred the stream need to be terminated. Errors can not be just caught and ignored. No other file takes a chance to be processed. There is https://www.npmjs.com/package/gulp-plumber package that tries to prevent 'error' events by monkey patching a pipe. But technically it is a hack and it doesn't work in many cases.

[konstantine811]

Usually gulp-sass stops files processing after an error occured. So some files that do not have any error may remain uncompiled. The gulp-flatmap can be used to handle errors per-file so each file takes a chance to be processed.

var sourcemaps = require('gulp-sourcemaps');
var gulpFlatmap = require('gulp-flatmap');

gulp.task('sass', function () {
 return gulp.src('./sass/**/*.scss')
  .pipe(gulpFlatmap(function (stream) {  // the stream contains a single file 
     return stream
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(sourcemaps.write('./maps'))
  })
  .pipe(gulp.dest('./css'));
});

Thank you! It is really help me and fixed but with crashed scss compiler