ГЛОТОК!

Это сообщение было написано 20 ноября 2014 г.: http://developer.fortnox.se/blog/gulp/

ВЫ СЛЫШАЛИ О ГАЛПЕ?

А может Грант? В любом случае, оба этих парня занимаются выполнением задач. Поскольку Gulp немного быстрее, он мой самый близкий друг. Но они оба справляются со своей задачей. Так что же делают эти таскраннеры?

Ну они многое могут.

Зачем использовать средство запуска задач?
Одним словом: автоматизация.

Вы можете испортить javascript, скомпилировать свой SASS и оптимизировать изображения. И это только начало. Gulp — младший из них двоих, но на данный момент у него 980 плагинов на выбор.

С ЧЕГО НАЧАТЬ?

Многие умные люди писали или делали скринкасты об этом. Первое, что вам нужно, это Node, так как и grunt, и gulp используют потрясающую систему NPM. После этого установите gulp глобально:

$ npm install --global gulp

Тогда вместо того, чтобы читать об этом здесь, вы должны посмотреть несколько замечательных видео о начале работы.

СОВЕТЫ ПО ПЛАГИНАМ GOOGLE!

Когда вы будете готовы к работе, я рекомендую ознакомиться с Googles Web Starter Kit. Это набор для создания современных веб-страниц, и, конечно же, они используют Gulp. Так что зайдите на Github, найдите Gulpfile.js, посмотрите их задачи и вдохновитесь. Если вам нужен полный список всех их плагинов, вы всегда можете проверить файл package.json.

СЛУЧАЙНЫЕ СОВЕТЫ ПО ПЛАГИНАМ!

Я решил поделиться несколькими моими любимыми плагинами, которых вы не найдете в Googles Kit:

УБИЙСТВЕННЫЙ СОВЕТ

Если вы дочитали до конца, вы должны получить хотя бы фрагмент кода. Когда вы используете gulp watch либо для javascript, либо для less/sass, очень важно, чтобы вы ловили ошибки. В противном случае каждый раз, когда вы пропускаете точку с запятой, ваша задача gulp останавливается.

var notify = require('gulp-notify');
    var less = require('gulp-less');
    var gutil = require('gulp-util');
    function handleError(task){
        return function(err) {
            gutil.log(gutil.colors.red(err));
            notify.onError(task + ' failed, check the logs..')(err);
            this.emit('end');
        };
    };
    gulp.task('styles', function() {
      return gulp.src('src/main.less')
        .pipe(less())
        .on('error', handleError('Less'))
        .pipe(gulp.dest('dist/styles'));
    });
SHOW LESS

Здесь я перехватываю ошибку и отправляю имя задачи в свою функцию handleError, которая использует плагин уведомлений для ее записи. Эта функция может быть в отдельном файле, который нам в этом случае потребуется.

Спасибо за чтение и увидимся позже!