Gulp. Часть 3. Ставим и используем плагины

Как вообще работает Gulp?

В конце второй части Как установить Gulp мы остановились на том, что он ругался на отсутствие gulpfile. Это "сердце" Gulp. Без этого файла он вообще ничего сделать не сможет, т.к. даже и не знает, что от него хотят.

Gulpfile - это просто JavaScript скрипт в корне проекта с именем файла gulpfile.js, который определяет как наш сборщик будет работать и что собирать. Он "делится" на задачи. Давайте на примерах:

var gulp = require('gulp');

gulp.task('default', function () {
    return gulp.src('/src/*')
        .pipe(gulp.dest('/build/'));
});

Здесь вы создали задачу-поумолчанию. Ту, которая будет вызываться при запуске Gulp без явного указания задачи. В данном примере она просто копирует файлы из одной директории в другую, ничего при этом не изменяя.

Компиляция LESS

Не люблю я рассматиривать нереальные задачи. Давайте поставим себе для этого урока задачу скомпилировать LESS в CSS с помощью Gulp.

Для задач чуть сложнее перемещения файлов "чистый" Gulp не подойдет. Нужно использовать плагины к нему. Благо их просто тьма и под каждую вашу задачу уже написан готовый плагин. В нашем случае будем использовать плагин gulp-less.

Установка плагина ничем не отличается от установки самого Gulp. Тот же самый npm:

npm install gulp-less

Теперь видоизменим наш gulpfile.js чтобы научить Gulp компилировать LESS.

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

gulp.task('default', function () {
    return gulp.src('/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('/css'));
});

Сложно? Не думаю. Все, что мы сделали, это получили сам объект плагина и добавили его вызов в задачу. Теперь попробуйте создать в проекте папку less с файлами внутри и запустите gulp из командной строки. LESS скомпилируется в CSS.

Используем package.json для простой установки

Согласитесь, не слишком удобно каждый раз устанавливать вручную все модули из проекта в проект. Напомню, что на Windows глобальная установка не прокатит.

У Node.js, а именно у его менеджера пакетов NPM есть возможность использовать один файл для описания завиисимостей проекта (что-то вроде composer.json у PHP-шников). Почему бы не использовать эту возможность для легкой установки наших плагинов?

// package.json

{
  "name": "Название проекта (на на что не влияет в нашем случае)",
  "version": "1.0.0",
  "description": "web-site",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.3"
  },
  "author": "",
  "license": "ISC"
}

Вот пример файла для нашей кофигурации. Здесь я указал точные версии gulp и gulp-less. Это из-за того, что npm сам их подставил при последнем обновлении. У вас версии могут отличаться при желании. Теперь при запуске npm install без параметров будут устанавливаться пакеты, описанные в этом файле. Удобно, не правда ли?

Вопрос читателям

Какие возможности Gulp описать в ближайшем будущем? Есть некоторые варианты: Создание спрайтов, генерация Sourcemaps, "слежение" за изменениями, оптимизация картинок.