So, I got this neat gulpfile and that's it, and it runs smoothly, except for that.
I run gulp-plumber to stop the scan task from crashing on error, the error gets into it, but then when I correct the error, the observer refuses to continue. I added a handleError , but it does not seem to do anything, although in this article it says that it should. This leads me to madness because I know people who got a job without them, but none of the solutions I found seem to work. Did I miss something?
EDIT: If I have an error in _lists.scss , for example, the error that appears is as follows:
[22:04:43] Plumber found unhandled error: Error in plugin 'gulp-sass' Message: styles\partials\_lists.scss 1:1 invalid top-level expression
Does this mean that I also have to handle the error manually with on.('error', function() {}) ? Because I thought it was the plumber's goal to remove manual error handling. I even tried to manually catch the error using this, but simply spat out the error in the console and refused to continue as before.
Here's the plumber part:
// Compile our SCSS into minified CSS gulp.task('styles', function() { return gulp.src('styles/main.scss') .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(sass({ style: 'expanded' })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/styles')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dist/styles')) .pipe(notify({ message: 'Finished compiling SCSS' })) });
And here is the whole gulpfile.js :
var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), plumber = require('gulp-plumber'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'), htmlmin = require('gulp-htmlmin'), del = require('del'); // Minify our HTML gulp.task('html', function() { return gulp.src('*.html') .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest('dist')) }); // Compile our SCSS into minified CSS gulp.task('styles', function() { return gulp.src('styles/main.scss') .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(sass({ style: 'expanded' })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/styles')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dist/styles')) .pipe(notify({ message: 'Finished compiling SCSS' })) }); // Concat and compile our JS into a minified file gulp.task('scripts', function() { return gulp.src('scripts/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('main.js')) .pipe(gulp.dest('dist/scripts')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(notify({ message: 'Finished compiling scripts' })); }); // Compress our images gulp.task('images', function() { return gulp.src('images/**/*.js') .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))) .pipe(gulp.dest('dist/images')) .pipe(notify({ message: 'Finished compiling images' })); }); // Clean/empty our dist folder gulp.task('clean', function(cb) { del(['dist/styles', 'dist/scripts', 'dist/images'], cb) }); // Run all our tasks when using 'gulp' command in CLI gulp.task('default', ['clean'], function() { gulp.start('html', 'styles', 'scripts', 'images'); }); // Watch our files for changes gulp.task('watch', function() { gulp.watch('styles/**/*.scss', ['styles']); gulp.watch('scripts/**/*.js', ['scripts']); gulp.watch('images/**/*', ['images']); });