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

Reading time ~3 minutes

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

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

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

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

1
gulp.watch
. Если возникла ошибка, то выполнение мониторинга в Gulp прерывается:

Прерванная работа Gulp

Но даже в этом случае довольно трудно разобраться, где именно закралась ошибка. В этой ситуации может помочь плагин 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())
в ту задачу, в которой необходимо включить возможность отслеживания ошибок. Например, пусть это будет задача минификации всех js-файлов проекта
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

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

Gulp в фоновом режиме

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

1
jquery-1.11.1.js
и снова перевожу взгзляд на консоль:

Плагин gulp-plumber отследил ошибку

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

1
gulp-plumber
выполнил свою задачу - сформировал ясный и четкий отчет об ошибке. И при этом не прервал работу самого Gulp.

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

Плагин gulp-plumber - ошибка исправлена

Плагин

1
gulp-plumber
снова справился со своей задачей - ошибка нами исправлена и он прилежно ее зафиксировал.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024