Gulp-sass: Stops writing CSS after first error in SASS

[demisx]

First, I've reported this issue under floatdrop/gulp-watch#86 thinking it was related to gulp-watch, but then I've realized that the issue is gone when I replace gulp-sass with gulp-less, so I thought maybe this is a gulp-sass related issue after all.

TL;DR: gulp-sass()stops piping files to destination after a SASS error occurs. Need to restart gulp for the problem to go away.

Detail:

1. When SASS files are error free, I see 'Writing sass' message each time I update a *.scss file.
2. Then, I deliberately introduce an error into one of the SASS files. I see an error message from gulp-plumber as I should.
3. However, when I undo this error, I no longer see "Writing sass" message and no CSS files are being written to the .build/ directory. I need to restart gulp watch-sass task to make things go back to normal.

# In gulpfile.coffee
sass = require("gulp-sass")
... ... ...
gulp.task "watch-sass", ->
  watch
    glob: filePath.appDir + "/**/*.scss"
  .pipe plumber()
  .pipe sass() # the problem goes away if I replace `sass` with `less`
  .pipe using prefix: "Writing sass" 
  .pipe gulp.dest('.build/')
  return  

[F21]

I am also seeing this as well when using gulp-watch and gulp-plumber.

gulp.task('css', function() {
  return gulp.src('css/**/*.scss')
    .pipe(plugins.plumber())
    .pipe(plugins.sass({ outputStyle: 'compressed'}))
    .pipe(gulp.dest('../css'));
});

gulp.task('watch', function() {

    gulpWatch.watch('css/**/*.scss', function (files, cb) {
        gulp.start('css', cb);
    });
});

In my case, if I introduce an error in my scss file, an error is thrown by plumber and the watch task does not terminate. However, if I fix the error, I can see that watch sees the change, but sass does not attempt to recompile the file.

[Arkkimaagi]

This is quite annoying. One typo and sass building of css dies, I have to restart gulp watch and refresh all the browsers. Is there any way to get around this or fix it?

[demisx]

A workaround is to retrieve files via a callback rather than pipe:

gulp.task "watch-sass", ->
  watch filePath.appDir + "/**/*.scss", (files) ->
    files.pipe plumber()
    .pipe sass()
    .pipe using prefix: "Writing sass" 
    .pipe gulp.dest('.build/')

[ilanbiala]

pretty frustrating to have to restart gulp watch, kinda defeats the purpose..

[Snugug]

I can confirm this is still happening in the 2.x branch; we will need to figure this out before releasing.

[Snugug]

I just re-tested this and it seems to be working fine when using .on('error', sass.logError). Can someone double check this for me? @dlmanning @Keats @demisx

npm install gulp-sass@next --save-dev

Specifically, what I was running is as follows:

'use strict';

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


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

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Running sass:watch

[Snugug]

I've tried a bunch of iterations on the above that's working and I cannot get it to fail again. I'm closing this; if someone can find a repeatable way to produce this error in the 2.x branch, we can consider reevaluating.

[sqal]

@Snugug I've installed gulp-sass@next (before that I cleaned npm cache) and it still stops piping file after an error occurs. I don't know how you made it work :(

[Snugug]

@sqal Try using the code in https://github.com/dlmanning/gulp-sass/issues/90#issuecomment-89066953

[sqal]

@Snugug oh ok, now I see my mistake:

My task before:

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

Your is without return on src. Now it works great for me! :) Thanks.

[backflip]

I had to switch to the sync version to make this work.

Not working:

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

Working:

gulp.task('css', function() {
    return gulp.src('./source/assets/css/*.scss')
        .pipe(plumber())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('./build/'));
});

---

OS X Yosemite
Node 0.10.38
gulp 3.8.11
gulp-plumber 1.0.0
gulp-sass 2.0.0

[fspoettel]

@Snugug Can confirm what @backflip is saying. Is having to use sync to get this to work expected behavior? Your example code is failing when @import fails

[Snugug]

I understand people are still having issues, so for those who are, please try the following:

1. The code from https://github.com/dlmanning/gulp-sass/issues/90#issuecomment-89066953 _EXACTLY_ as it appears (_Please Note_ that it does not return the task innards)
2. The code from https://github.com/dlmanning/gulp-sass/issues/90#issuecomment-100021202 _EXACTLY_ as it appears (_Please Note_ that it does return the task innards and uses Gulp Plumber)

If neither of these things work for you, please provide the following:

• Create locally the absolute smallest reduced use case where you see the problem happening. Fewest Gulp pipes possible, least amount of Sass possible, smallest number of dependencies.
• A Gist containing separate files for your exact Gulpfile.js, package.json, and Sass files
• Your Node version
• Your Operating System

[fspoettel]

@Snugug the return was the culprit, great catch!

[jenil]

Thanks @Snugug! Works for me too without the return :+1:

[Snugug]

Awesome. So I'm closing again and am going to write something up in the Wiki about this

[Snugug]

The wiki: https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes

[gruppjo]

Hi, I found this issue after researching a bit about how to use gulp-sass with plumber.
I understood that in order to keep the watch task alive I need to either:

1. omit the return statement for the pipe
2. OR use the sync method as @backflip suggested (btw. thanks for that!)

However I don't think this is an optimal solution because either you loose:

1. async task support, when you omit return and don't thus don't return the stream
2. OR you loose concurrency execution

And both of them are great advantages of gulp which I don't want to loose when I'm using gulp-sass.

Minimal case, where returning the stream is beneficial for the overall execution time:

'use strict';

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

gulp.task('build', ['sass', 'some-other-task'], function () {
  var stream = gulp.src('.');
  // awesome build logic
  return stream;
});

gulp.task('sass', function () {
  // IMPORTANT:
  // 1. stream needs to be returned so 'build' task will wait
  // 2. no sync so 'some-other-task' can execute concurrently
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

What do you guys think?
I'm switching from gulp-ruby-sass to gulp-sass and I would really like to see this working in gulp-sass as well!

[kozie]

Thanks @Snugug, i just added .on('error', sass.logError) after sass() in my existing gulpfile and it works like a charm now!, thanks.

Here's my full sass task, for the ones who want an example, tho it's in coffeescript ;)

gulp.task 'sass', ->
  gulp.src options.SASS_SRC
    .pipe plumber()
    .on 'error', notify.onError()
    .on 'error', (err) ->
      console.log 'Error:', err
    .pipe sass(outputStyle: 'expanded').on "error", sass.logError
    .pipe prefix browsers: ["last 2 versions", "> 5%"]
    .pipe gulp.dest options.SASS_DEST
    .pipe sync.stream()
    .pipe notify message: 'Building CSS successful', onLast: true

[Avcajaraville]

I'm still having this issue and no solutions that suits me: I need to return the stream and I need to use the async version.

Any update ?

[jwogrady]

@Avcajaraville nope. :-(

[Avcajaraville]

@jwogrady I ended up rolling my own implementation with sass-node ;)

[pellesantiago]

In my case, it the "Source" folder is the same than "Destination" folder, it hangs.