Обрабатываем ошибки в gulp плагинах

November 09, 2015

Суть проблемы, мой текущий процесс работы это запущенный сильно в фоне терминал, разделенный tmux.

В одном экране крутится приложение, во втором что-то вроде рабочего терминала - работа с файлами и git в третье крутится gulp watch, с livereload или же просто статический сервер browserSync.

Я в разработке использую sublime text и Safari. Я сохраняю изменения в редакторе, происходит пересборка проекта и когда я переключаюсь на браузер уже произойдет обновление экрана через livereload.

Что же может пойти не так? Некоторые таски имеют обыкновение падать посередине процесса, они вырубают livereload и иногда статический сервер. То что он упал и сборка не удалась я выясню только, когда пойду делать коммит или начну прокликивать ссылки. Если же сервер сторонний например django/flask. То тут даже проклик не поможет.

Привет, я твой главный таск и люблю бесшумно падать в обморок

gulp.task('styles', function () {
    return gulp.src('_src/css/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(output + '/css'))
        .pipe(reload({stream:true}));
});

Решение в лоб

gulp.task('styles', function () {
    return gulp.src('_src/css/*.css')
        .pipe(postcss(processors))
        .on('error', function (err) {
            console.log(err.message);
            this.end();
        })
        .pipe(gulp.dest(output + '/css'))
        .pipe(reload({stream:true}));
});

Ну или вот так

function errorhandler() {
    console.log(err.message);
    this.end();
};

gulp.task('styles', function () {
    return gulp.src('_src/css/*.css')
        .pipe(postcss(processors)).on('error', errorhandler)
        .pipe(gulp.dest(output + '/css'))
        .pipe(reload({stream:true}));
});

Конструкция this.end() завершает задачу, до того как он уронит watch/ browserSync

Более изящное решение

Использование gulp-notify плагин для вывода сообщений в систему. И может фолбечить на growl/ console, что сразу делает его круче growl.

npm install --save-dev gulp-notify
var notify = require('gulp-notify');

function errorhandler() {
    var args = Array.prototype.slice.call(arguments);
    // Send error to notification center with gulp-notify
    notify.onError({
        title: 'Compile Error',
        message: '<%= error.message %>',
        // sound: true можно даже со звуком!
    }).apply(this, args);

    // Keep gulp from hanging on this task
    this.emit('end');
};

/*
.pipe(postcss(processors)).on('error', errorhandler)
*/

Другие способы?

Можно использовать gulp-plumber, но он любит превращать задачи в кашу. Вывод ошибок прямо в web? Примером такого вывода является плагин postcss-browser-reporter, но я не смог завести его с полпинка и не нашел, точнее не искал его модификацию для текущей задачи, если есть подскажите.