Gulp error: events.js:72

Question

I've been trying out (or trying to get working) a jekyll style guide from: https://github.com/davidhund/jekyll-styleguide#user-content-requirements

My gulpfile is:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');

// Handy file paths
paths = {
    scss: "./static/scss/",
    css:  "./static/css/",
    img:  "./static/img/",
    js:   "./static/js/"
}

// SASS
gulp.task('sass', function() {
    // Be specific in what file to process
    return gulp.src(paths.scss+'app.scss')
        .pipe(sass({ style: 'expanded' }))
        .pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
        .pipe(minifycss())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.css))
        // .pipe(gulp.dest('./_site/static/css/'))
        // .pipe(notify({ message: 'Styles task complete' }));
});

// COPY CSS
gulp.task('copycss', function() {
    return gulp.src(paths.css+'app.min.css')
        .pipe(gulp.dest('./_site/static/css/'))
        // .pipe(notify({ message: 'Copied Minified CSS to _site/static/css' }));
});


// JEKYLL
// Start a `jekyll build` task
// From: http://stackoverflow.com/questions/21293999/use-jekyll-with-gulp
gulp.task('jekyll-build', function() {
    require('child_process').spawn('jekyll', ['build', '--config=_config.dev.yml'], {stdio: 'inherit'});
});

// Start a `jekyll build --watch` task
gulp.task('jekyll-watch', function() {
    require('child_process').spawn('jekyll', ['build', '--watch', '--config=_config.dev.yml'], {stdio: 'inherit'});
});

// BROWSER-SYNC
gulp.task('browser-sync', function() {
    // reload when Jekyll-generated files change
    browserSync.init(['./_site/static/**/*.css', './_site/**/*.html'], {
        server: {
            baseDir: './_site/'
        }
    });
});

// WATCH
gulp.task('watch', function() {
    // TEST: [Only] Run `jekyll build` when I update (the version in) settings.yml
    // gulp.watch('./_config.yml', ['jekyll']);

    // Run Sass when I update SCSS files
    gulp.watch(paths.scss+'**/*.scss', ['sass', 'copycss']);
    // gulp.watch(paths.js+'**/*.js', ['scripts']);
    // gulp.watch(paths.img+'**/*', ['images']);
});


// DEFAULT task
gulp.task('default', ['jekyll-watch', 'watch','browser-sync']);

Whenever I run gulp I just get:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: spawn ENOENT
    at errnoException (child_process.js:998:11)
    at Process.ChildProcess._handle.onexit (child_process.js:789:34)

Answer 1

The problem you are facing is that you are not handling error, so, when gulp finds an error, it throw it, but "nobody" is taking care of it, which causes gulp to break.

In order to keep executing gulp, you have to define your error handlers and do whatever you want to do with error, typically, print on the cli what is going on.

You also need to identify which part of your code is "throwing" the error, in your case, its caused by the "watchers": a watcher listen for additional events or to add files to the watch. So, a watcher is throwing the error.

You have to catch it !

Add an on handler event after the execution of plugins, and pass this error to a function that will pint it (or something else), but will not break "the watch" (John Snow will be proud) and allows you to identify the error, fix it, at keep watching without restarting gulp manually.

PS: Don't forgot to define "the catcher function" !

Your code could be something like this:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');

// Handy file paths
paths = {
    scss: "./static/scss/",
    css:  "./static/css/",
    img:  "./static/img/",
    js:   "./static/js/"
}

// SASS
gulp.task('sass', function() {
    // Be specific in what file to process
    return gulp.src(paths.scss+'app.scss')
        .pipe(sass({ style: 'expanded' })).on('error', errorHandler)
        .pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
        .pipe(minifycss())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.css))
        // .pipe(gulp.dest('./_site/static/css/'))
        // .pipe(notify({ message: 'Styles task complete' }));
});

// COPY CSS
gulp.task('copycss', function() {
    return gulp.src(paths.css+'app.min.css')
        .pipe(gulp.dest('./_site/static/css/'))
        // .pipe(notify({ message: 'Copied Minified CSS to _site/static/css' }));
});


// JEKYLL
// Start a `jekyll build` task
// From: http://stackoverflow.com/questions/21293999/use-jekyll-with-gulp
gulp.task('jekyll-build', function() {
    require('child_process').spawn('jekyll', ['build', '--config=_config.dev.yml'], {stdio: 'inherit'});
});

// Start a `jekyll build --watch` task
gulp.task('jekyll-watch', function() {
    require('child_process').spawn('jekyll', ['build', '--watch', '--config=_config.dev.yml'], {stdio: 'inherit'});
});

// BROWSER-SYNC
gulp.task('browser-sync', function() {
    // reload when Jekyll-generated files change
    browserSync.init(['./_site/static/**/*.css', './_site/**/*.html'], {
        server: {
            baseDir: './_site/'
        }
    });
});

// WATCH
gulp.task('watch', function() {
    // TEST: [Only] Run `jekyll build` when I update (the version in) settings.yml
    // gulp.watch('./_config.yml', ['jekyll']);

    // Run Sass when I update SCSS files
    gulp.watch(paths.scss+'**/*.scss', ['sass', 'copycss']);
    // gulp.watch(paths.js+'**/*.js', ['scripts']);
    // gulp.watch(paths.img+'**/*', ['images']);
});


// DEFAULT task
gulp.task('default', ['jekyll-watch', 'watch','browser-sync']);

// Handle the error
function errorHandler (error) {
  console.log(error.toString());
  this.emit('end');
}

Note the error handler definition at the end and the addition of .on('error', errorHandler) on your sass task.