Stops writing CSS after first error in SASS

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  

[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

[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!