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

Question

Я не знаю, почему сервер все еще останавливается всякий раз, когда в моих файлах js есть ошибка, хотя у меня есть jshint в моем gulpfile. Я установил 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 вещей в своей собственную задачу и убедитесь, что задача 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')) 
}); 

Тогда вы должны сделать свой 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

Самым простым способом исправить было бы использовать Глоток-водопроводчика, чтобы обработать ошибку немного более изящно:

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

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

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

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