How do I prevent gulp watch from crashing (e.g. stop watching) when using elixir in laravel 5?

Question

So I like elixir a lot.

But when I run gulp watch and write css (scss to be precise), it crashes after a couple of saves, thus forcing me to start gulp watch again. And it is driving me crazy, almost to the point of me not being able to do my work.

I have looked at stackoverflow at people with similar looking problems, but to no prevail. I have also found a few articles like this: http://maximilianschmitt.me/posts/prevent-gulp-js-from-crashing-on-error/

But either their solution is outdated, or I'm too stupid to use their solution correctly. Most likely the latter...

Here is my gulp.js file:

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix
    .sass('styles.scss', 'public/css')
    .scripts(null,
        'public/js/all.js',
        'resources/assets/js'
    )
    .version([
        'public/css/styles.css',
        'public/js/all.js'
    ])
});

Any ideas how to fix this?

Answer 1

The problem

gulp watch is set to stop when an error is detected, thus forcing the need to do a manual restart of gulp watch. Irritating.

The solution (not elegant, but it works)

First, my gulp.js as is now:

var gulp        = require('gulp'),
    elixir      = require('laravel-elixir'),
    plumber     = require('gulp-plumber');

gulp.task('default', function() {
});

gulp.task('watch', function() {
    gulp.watch('resources/**', ['default']);
    elixir(function(mix) {
        mix
        .sass('styles.scss', 'public/css')
        .scripts(null,
            'public/js/all.js',
            'resources/assets/js'
        )
        .version([
            'public/css/styles.css',
            'public/js/all.js'
        ])
    }).pipe(plumber());
});

What I did:

1. I installed gulp plumber $ npm install --save-dev gulp-plumber
2. I required gulp plumber and the base gulp dependency to my gulp file
3. I defined an empty default task, otherwise gulp wouldn't play with me...
4. I created a gulp task called "watch", otherwise gulp watch wouldn't work in the command line like before.
5. I defined the gulp.watch() to make gulp, ehh, watch?
6. I appended .pipe(plumber()); at the end if my elixir function. The plumber is the thing that prevents the gulp watcher from crashing on error

So, to make it easy for you, copy paste the code below into your gulp.js file , run $ npm install --save-dev gulp-plumber, and fill in your own mix

var gulp        = require('gulp'),
    elixir      = require('laravel-elixir'),
    plumber     = require('gulp-plumber');

gulp.task('default', function() {
});

gulp.task('watch', function() {
    gulp.watch('resources/**', ['default']);
    elixir(function(mix) {
        //Your own elixir code as you know it.
    }).pipe(plumber());
});

Note you'll be getting an error in the command line / terminal when you run gulp watch. Ignore it. Try to save an scss or js file, reload the brwoser, and you'll see gulp and elixir is doing their job just fine.

The error:

CATCHES!!!

1. Running gulp does nothing now.
2. If you make a syntax error, the watcher stops until you fix the error. However, you don't have to manually restart it. Say, if you miss a ; in your scss, it'll work again as soon as you add the ; and save.

NOTE: This is a hack. Not very elegant. But it works. According to contra in this thread: https://github.com/gulpjs/gulp/issues/71 gulp v.4.x.x should fix the problem of gulp watch crashing on finding an error