Gulp-plumber - отслеживание ошибок в Gulp

Кто не знаком с тем, что при написании кода очень часто возникают ошибки или банальные опечатки?

И даже если установлены такие палочки-выручалочки, как Emmet, это не всегда спасает из ситуации. А если представить, что вы пишете большой проект и в нем закралась ошибка, то нелегко будет ее найти в куче кода.

При использовании Gulp, который автоматически отслеживает события и выполняет соотвествующие задачи, ситуация несколько “облегчается” тем, что при возникновении ошибки можно увидеть тот момент, когда она произошла.

Например, Gulp настроен на автоматическое фиксирование изменений через

1

gulp.watch

Но даже в этом случае довольно трудно разобраться, где именно закралась ошибка. В этой ситуации может помочь плагин gulp-plumber, который формирует вывод об ошибке. Но при этом работа Gulp не прерывается.

Давайте установим и попробуем в работе плагин

1

gulp-plumber

Установка плагина gulp-plumber

Установка плагина

1

gulp-plumber

1

npm

1

--save-dev

$ sudo npm install --save-dev gulp-plumber

Использование плагина gulp-plumber

Для применения плагина

1

gulp-plumber

1

plumber

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

А затем дописать строку

1

.pipe(plumber())

1

uglify

1

gulp.src('js/*.js')

1

.pipe(plumber())

1

.pipe(uglify())

1

.pipe(gulp.dest('build/js'))

// Uglify Task
gulp.task('uglify', function(){
  gulp.src('js/*.js')
    .pipe(plumber()) // plumber
    .pipe(uglify())
    .pipe(gulp.dest('build/js'))
});

Точно также можно поступить, если необходим контроль ошибок в другой задаче, к примеру конкатенации CSS-файлов:

// Concat Task
gulp.task('concat', function(){
  gulp.src('css/*.css')
    .pipe(plumber())
    .pipe(concatCSS('concatenate.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

Запуск мониторинга ошибок gulp-plumber

Для удобства проверки работы плагина

1

gulp-plumber

1

gulp.watch

1

default

// Watch Task
gulp.task('watch', function() {
  gulp.watch('js/*.js', ['uglify']);
  gulp.watch('css/*.css', ['concat']);
});

// Default Task
gulp.task('default', ['watch']);

Запускаю в консоли процесс мониторинга в Gulp командой:

$ gulp

… и смотрю на вывод в консоли:

Теперь намеренно вношу ошибку в файл

1

jquery-1.11.1.js

Отлично! Плагин

1

gulp-plumber

Возвратим все назад и исправим ошибку, допущенную ранее. Снова взглянем на консоль:

Плагин

1

gulp-plumber