Gulp Styles Task should fail silently

[Smona]

When attempting to compile incorrect scss, gulp-sass crashes the gulp watch process. The task should fail gracefully, keeping gulp watch running.

Possible Solutions Solution One:

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');
}

---

Solution Two: Another solution to this is to put gulp watch in an infinite loop within a Bash (or sh) shell. while true; do gulp; gulp watch; sleep 1; done

Keep the output of this command in a visible area on your screen as you edit your JavaScript. When your edits result in an error, Gulp will crash, print it's stack trace, wait for a second, and resume watching your source files. You can then correct the syntax error, and Gulp will indicate whether or not the edit was a success by either printing out it's normal output, or crashing (then resuming) again.

This will work in a Linux or Mac terminal. If you are using Windows, use Cygwin or Ubuntu Bash (Windows 10).

---

Solution Three: gulp-plumber

gulp.task('styles', ['wiredep'], function () {
var merged = merge();
manifest.forEachDependency('css', function (dep) {
    var cssTasksInstance = cssTasks(dep.name);
    if (!enabled.failStyleTask) {
        cssTasksInstance.on('error', function (err) {
            console.error(err.message);
            this.emit('end');
        });
    }
    merged.add(gulp.src(dep.globs, {base: 'styles'})
        .pipe(plumber({errorHandler: onError}))
        .pipe(cssTasksInstance));
});
return merged
    .pipe(writeToManifest('styles'));
});

var onError = function (err) {
console.log(err.toString());
this.emit('end');
};

[bpan]

I can take a crack at this today.

[Smona]

@bpan great! Iirc we actually already have gulp-plumber in our gulpfile, it just needs to be configured correctly