gulp останавливает сервер при ошибке, даже если jshint включен в gulpfile.js

Question

Я не знаю, почему сервер все еще останавливается всякий раз, когда в моих файлах js есть ошибка, даже если в моем gulpfile есть jshint. Я установил jshint и включил его в свой проект, потому что он сообщает об ошибках в js-файлах, но все равно не работает. Как я могу это исправить?

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 делает то, что вы говорите, он делает: он сообщает об ошибках в файлах JavaScript. Ни больше ни меньше. Это не мешает дефектным файлам JavaScript достигать более поздних стадий конвейера, таких как uglify() (который выдает и тем самым останавливает ваш сервер, если в файле JavaScript есть ошибки).

Если вы хотите предотвратить повреждение вашего сервера с помощью дефектных файлов JavaScript, вам необходимо jshint добавьте его в свою задачу и убедитесь, что она не выполняется, если в любом файле JavaScript есть ошибка:

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

Тогда вам нужно сделать scripts задача зависит от этого jshint задача:

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

Теперь ваш scripts Задача будет выполняться только тогда, когда jshint задача была успешной. Если какой-либо файл JavaScript был неисправен jshint выведет ошибку на консоль, в то время как ваш сервер продолжает работать, используя последнюю хорошую версию вашего JavaScript.

Answer 2

Простейшим решением было бы использовать gulp-plumber для обработки ошибки немного более изящно:

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

Лично мне не нравится это решение, потому что оно предотвратит обновление вашего уменьшенного файла. Вот что я бы порекомендовал:

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

Во-первых, обратите внимание, что я не пишу по нескольким адресатам. Вместо этого я использую исходные карты, чтобы вам не понадобился унифицированный код. Во-вторых, я использую gulp-if для условной передачи вашего кода через uglify на основе результатов jshint. Код с ошибками пропустит uglify, так что он все равно попадет в целевой файл.

Теперь вы можете проверить и отладить его с помощью инструментов разработчика.

Примечание: я рекомендую это только для местного развития. Я бы не стал связывать это с конвейером непрерывной интеграции, потому что вам нужен только хороший код, чтобы сделать его производственным. Либо создайте для этого другую задачу, либо добавьте другое условие gulp-if, чтобы предотвратить построение неработающего кода на основе переменных среды.