gulp stops server on error even with jshint included in gulpfile.js

Question

I don't know why the server still stops whenever there's an error in my js files even though I have jshint in my gulpfile. I installed jshint and included it in my project because it reports errors in js files, but it's still failing. How can I fix this?

gulp.task('scripts', () => {
    return gulp.src('assets/js/src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish', {beep: true}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('assets/js/build/'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.stream({stream: true}));
});

Answer 1

gulp-jshint does what you says it does: it reports errors in JavaScript files. Nothing more, nothing less. It doesn't prevent defective JavaScript files from reaching later pipe stages like uglify() (which throws up and thus stops your server if there's any error in a JavaScript file).

If you want to prevent defective JavaScript files from wrecking your server, you need to put all the jshint stuff into it's own task and make sure that task fails when any JavaScript file has an error:

gulp.task('jshint', () => {
    return gulp.src('assets/js/src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish', {beep: true}))
        .pipe(jshint.reporter('fail'))
});

Then you need to make your scripts task depend on that jshint task:

gulp.task('scripts', ['jshint'], () => {
    return gulp.src('assets/js/src/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('assets/js/build/'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.stream({stream: true}));
});

Now your scripts task will only run when the jshint task was successful. If any JavaScript file was defective jshint will output the error to the console while your server continues to run using the last good version of your JavaScript.

Answer 2

The simplest fix would be to use gulp-plumber to handle the error a little more gracefully:

var plumber = require("gulp-plumber");

gulp.task('scripts', () => {
    return gulp.src('assets/js/src/*.js')
        .pipe(plumber())
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish', {beep: true}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('assets/js/build/'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.stream({stream: true}));
});

Personally, I don't like that solution because it will prevent your minified file from being updated. Here's what I would recommend:

var jshintSuccess = function (file) {
    return file.jshint.success;
}

gulp.task('scripts', () => {
    return gulp.src('assets/js/src/*.js')
        .pipe(sourcemaps.init())
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish', {
            beep: true
        }))
        .pipe(gulpif(jshintSuccess, uglify()))
        .pipe(concat('main.js'))
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.stream({
            stream: true
        }));
});

First, notice that I'm not writing to multiple destinations. Instead, I'm using sourcemaps so that you don't need unminified code. Second, I'm using gulp-if to conditionally pipe your code through uglify based on the results of jshint. Code with errors will bypass uglify so that it still makes it into to your destination file.

Now, you can inspect and debug it with the developer tools.

Note: I recommend this for local development only. I wouldn't connect this to a continuous integration pipeline because you'll only want good code to make it into production. Either set up a different task for that or add another gulp-if condition to prevent broken code from building based on environment variables.