В Gulp имеется встроенная функция

1
gulp.watch
для отслеживания изменений в любом из файлов проекта.

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

Gulp watch

Сейчас давайте рассмотрим возможность запуска автоматического мониторинга в Gulp с помощью встроенной функции

1
gulp.watch
. Допустим, у нас имеются две именованные задачи, одна из которых выполняет минификацию js-файлов
1
gulp-uglify
, а вторая - конкатенацию css-файлов
1
gulp-concat
:

// Uglify Task

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

// Concat Task

gulp.task('concat', function() {
  gulp.src('css/*.css')
    .pipe(concat('one.css'))
    .pipe(gulp.dest('build/css'))
});

Нам нужно сделать так, чтобы Gulp запускал их каждый раз самостоятельно, когда мы внесем изменения в любой из js-файлов или css-файлов, а затем сохраним эти изменения.

Для этого создадим еще одну именованную задачу

1
watch
, цель которой - отслеживание изменений в указанных файлах. Создаем все как обычно (или - почти как обычно):

// Watch Task

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

Создаем задачу по имени

1
watch
, а внутри тела функции поместим встроенную функцию
1
gulp.watch
. В качестве аргументов этой функции мы передаем ей два параметра.

Первый параметр - что и где Gulp должен отслеживать;

1
js/*.js
говорит о том, что необходимо отслеживать изменения всех файлов с расширением
1
.js
, помещенных в директории
1
js
.

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

1
uglify
.

Как видим, имя задачи передается функции

1
gulp.watch
в виде массива; отсюда можно сделать вывод, что задач может быть не одна, а несколько - в виде последовательности.

Перейдем от слов к делу и запустим в консоли выполнение мониторинга с помощью функции

1
gulp.watch
. Команда для мониторинга в Gulp выглядит таким образом:

$ gulp watch
  [10:55:26] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [10:55:26] Starting 'watch'...
  [10:55:26] Finished 'watch' after 7.06 ms

Видим, что задача по имени

1
watch
запустилась и вроде как закончилась (
1
Finished 'watch' after 7.06 ms
). Но на самом деле Gulp находиться в фоновом режиме и отслеживает изменения js-файлов.

Чтобы проверить это, отредактируем и сохраним js-файл (в моем случае это

1
jquery.js
):

$ gulp watch
    [10:55:26] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [10:55:26] Starting 'watch'...
    [10:55:26] Finished 'watch' after 7.06 ms
    [10:59:17] Starting 'uglify'...
    [10:59:17] Finished 'uglify' after 8.96 ms

Вау! Видим, что в консоли появились две строчки - это отработала задача

1
uglify
. То есть, Gulp “увидел”, что я внес изменение в файле
1
jquery.js
и мгновенно запустил задачу
1
uglify
, чтобы зафиксировать это изменение. Мониторинг с помощью функции
1
gulp.watch
работает!

Давайте немного усложним задачу и добавим мониторинг

1
gulp.watch
в директории
1
css
. При любом изменении файлов в этой папке должна запускаться задача
1
concat
:

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

Снова запустим Gulp для мониторинга изменений в проекте.

Кстати, а вы знаете, как останавливать Gulp, запущенный в фоновом режиме? Если нет, то это просто - в консоли Linux это выполняется сочетанием клавиш Ctrl+C.

$ gulp watch
    [11:08:55] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:08:55] Starting 'watch'...
    [11:08:55] Finished 'watch' after 8.24 ms

Внесем и сохраним изменения в файле

1
normalize.css
, размещенном в директории
1
css
. Вернемся в консоль:

$ gulp watch
    [11:08:55] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:08:55] Starting 'watch'...
    [11:08:55] Finished 'watch' after 8.24 ms
    [11:11:04] Starting 'concat'...
    [11:11:04] Finished 'concat' after 9.12 ms

О! Видим, что

1
gulp.watch
“подхватил” изменение в файле
1
normalize.css
и запустил соответствующую этому изменению задачу
1
concat
. Отлично - все работает!

Мониторинг

1
gulp.watch
можно добавить в задачу по умолчанию (
1
default
). Давайте создадим такую конструкцию:

// Default Task

  gulp.task('default', ['concat', 'uglify', 'watch']);

Теперь, если запустить задачу

1
default
в консоли, то увидим следующее:

$ gulp
    [11:20:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:20:44] Starting 'concat'...
    [11:20:44] Finished 'concat' after 7.18 ms
    [11:20:44] Starting 'uglify'...
    [11:20:44] Finished 'uglify' after 2.65 ms
    [11:20:44] Starting 'watch'...
    [11:20:44] Finished 'watch' after 7.96 ms
    [11:20:44] Starting 'default'...
    [11:20:44] Finished 'default' after 7.23 μs

Задачи запустились и выполнились именно в той последовательности, в какой они прописаны в массиве. Сперва выполнились две задачи на конкатенацию

1
concat
и минификацию
1
uglify
, а затем запустилась задача на мониторинг
1
watch
.

Gulp “повис” в фоновом режиме и отслеживает изменения с помощью функции

1
gulp.watch
в указанных директориях. Проверим это и внесем легкое изменение в любом из файлов (пусть это будут снова
1
normalize.css
и
1
jquery.js
):

$ gulp
    [11:20:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:20:44] Starting 'concat'...
    [11:20:44] Finished 'concat' after 7.18 ms
    [11:20:44] Starting 'uglify'...
    [11:20:44] Finished 'uglify' after 2.65 ms
    [11:20:44] Starting 'watch'...
    [11:20:44] Finished 'watch' after 7.96 ms
    [11:20:44] Starting 'default'...
    [11:20:44] Finished 'default' after 7.23 μs
    [11:26:31] Starting 'concat'...
    [11:26:31] Finished 'concat' after 2.37 ms
    [11:26:46] Starting 'uglify'...
    [11:26:46] Finished 'uglify' after 1.49 ms

Функция

1
gulp.watch
прилежно отследила оба эти изменения и запустила соотвествующие им задачи:

...
  [11:26:31] Starting 'concat'...
  [11:26:31] Finished 'concat' after 2.37 ms
  [11:26:46] Starting 'uglify'...
  [11:26:46] Finished 'uglify' after 1.49 ms

Отлично! Мы изучили вопрос создания задачи мониторинга в Gulp с помощью функции

1
gulp.watch
!


В предыдущей статье “Gulp - установка и запуск плагина gulp-uglify”, где мы учились устанавливать и запускать плагины под Gulp, мы создавали задачу под этот плагин.

Сами не зная того, тогда мы создали именованную задачу (named task). Как вы помните из вводной статьи “Gulp - знакомство и первый запуск”, в этом менеджере имеется два типа задач - задача по умолчанию (default) и именованная задача (named task).

В этом разделе мы углубимся в вопрос задач в Gulp и рассмотрим детально, каким образом создается именованная задача (named task) или несколько именованных задач (named tasks), как можно объединять именованные задачи (named tasks) в последовательности, как можно вызывать выполнение одной задачи из другой задачи.

Создание named task в Gulp

В менеджере Gulp может существовать тысячи задач, каждая из которых нацелена на получение конкретного результата. Давайте создадим отдельную задачу для конкатенации файлов. Для этой цели существует плагин

1
gulp-concat
. На странице документации этого плагина описан процесс установки и настройки - gulp-concat.

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

1
gulp-concat
в проект:

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

И создадим в файле

1
gulpfile.js
отдельную задачу для этого плагина:

// Concat Task
  gulp.task('concat', function() {
    gulp.src('css/*.css')
    .pipe(concat('one.css'))
    .pipe(gulp.dest('build/css'))
  })

… а также создадим отдельную переменную для этого плагина:

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

Кстати, если вы еще не задались вопросом, а что это за странные строки -

1
gulp.src
,
1
gulp.dest
,
1
gulp.task
, то могу вкратце сказать, что это встроенные функции Gulp, каждая из которых выполняет свою задачу.

Осталось запустить в консоли именованную задачу (named task)

1
concat
, которая произведет слияние в один файл всех файлов с расширением .css, расположенных в директории css:

$ gulp concat
  [09:53:28] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [09:53:28] Starting 'concat'...
  [09:53:28] Finished 'concat' after 9.91 ms

Отлично - мы создали named task!

Создание последовательности named tasks в Gulp

В Gulp можно создавать последовательность задач, в которой выполнение всех задач будет производиться в том порядке, в котором они помещены в очередь. Для этого несколько отдельных именованных задач (named tasks) помещают внутрь задачи по умолчанию (default).

Вместо callback-функции разместим массив, состоящий из списка имен тех именованных задач (named tasks), которые мы хотим поместить в очередь. Фактически, в данном случае выполнение одной задачи будет производиться через вызов другой задачи.

Допустим, у нас имеются две именованные задачи (named tasks):

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

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

Поместим их в задачу по умолчанию:

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

Теперь в консоли достаточно запустить одну команду

1
gulp
на выполнение задачи по умолчанию (default). Тем самым мы запустим выполнение последовательности нескольких отдельных команд -
1
'concat', 'uglify'
:

$ gulp
  [10:05:36] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [10:05:36] Starting 'concat'...
  [10:05:36] Finished 'concat' after 7.17 ms
  [10:05:36] Starting 'uglify'...
  [10:05:36] Finished 'uglify' after 2.64 ms
  [10:05:36] Starting 'default'...
  [10:05:36] Finished 'default' after 7.04 μs

В выводе консоли видим, что сначала запустилась задача

1
concat
и выполнилась за 7.17 миллисекунд, затем запустилась задача
1
uglify
и на ее выполнение ушло 2.64 милисекунды. И затем запустилась задача по умолчанию
1
default
, которая выполнилась за 7.04 миллисекунд.

Все прошло успешно.


Рассмотрим очень нужный и полезный плагин

1
gulp-ruby-sass
под Gulp для компиляции файлов Sass в файлы формата CSS. Для разработчиков, которые пользуются препроцессором Sass данный плагин
1
gulp-ruby-sass
просто необходим.

Для компиляции Sass в CSS под Gulp имеется несколько плагинов. Например,

1
gulp-sass
или
1
gulp-ruby-sass
. Более стабильным плагином является
1
gulp-ruby-sass
. Вот его мы и установим.

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

Команда установки уже стандартная для нас:

$ sudo npm install --save-dev gulp-ruby-sass

В директории

1
sass
заранее помещены мною два scss-файла
1
main.scss
и
1
style.scss
:

$ ls sass/
main.scss  style.scss

После этого создаю именованную задачу

1
sass
для плагина
1
gulp-ruby-sass
:

// Sass Compile Task
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('build/css'))
});

И запускаем задачу

1
sass
:

$ gulp sass
  [14:31:48] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [14:31:48] Starting 'sass'...
  [14:31:48] Finished 'sass' after 12 ms
  [14:31:49] gulp-ruby-sass: directory
  [14:31:49] gulp-ruby-sass: write main.css
  [14:31:49] gulp-ruby-sass: write style.css

Оба файла скомпилированы

1
main.scss
и
1
style.scss
и помещены по пути
1
build/css
:

$ ls build/css/
  main.css  one.css  style.css

Взглянем на содержимое хотя бы одного из них (пускай это будет

1
main.css
), чтобы убедиться в том, что это уже CSS-файл, а не SCSS-файл:

Компиляция Sass в CSS с помощью gulp-ruby-sass

Да, действительно, перед нами CSS-файл!

Добавление опций к плагину gulp-ruby-sass

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

Однако внимательный читатель мог уже при первом знакостве с плагинами заметить, что в руководстве почти к каждому из них, помимо описания установки, есть раздел, посвященный опциям данного плагина. Другими словами, плагин может не просто обрабатывать данные, а обрабатывать так, как нам это нужно.

Что касается плагина

1
gulp-ruby-sass
, то данный плагин может производить компиляцию из Sass в CSS несколькими способами. Достаточно почитать раздел API к документации к нему - gulp-ruby-sass.

Мы же воспользуемся всего одной опцией из этого списка и сделаем так, чтобы результат компиляции был более сжатым. Для этого немного изменим созданную ранее задачу

1
sass
и добавим опцию
1
style: 'compressed'
к переменной
1
sass
:

// Sass Compile Task
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
  .pipe(sass({
    style: 'compressed'
  }))
  .pipe(gulp.dest('build/css'))
});

Снова запустим задачу

1
sass
из консоли:

$ gulp sass
  [14:52:57] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [14:52:57] Starting 'sass'...
  [14:52:57] Finished 'sass' after 8.68 ms
  [14:52:58] gulp-ruby-sass: directory
  [14:52:58] gulp-ruby-sass: write main.css
  [14:52:58] gulp-ruby-sass: write style.css

И взглянем на результат компиляции файла

1
main.scss
в файл
1
main.css
:

Компиляция gulp-ruby-sass с опцией compressed

Отлично! Видим, что плагин

1
gulp-ruby-sass
действительно отработал с опцией
1
compressed
и произвел не просто компиляцию из SCSS в CSS, но и сжатие CSS-файла
1
main.css
- удалены все лишние пробелы и табуляция, выкинуты лишние точки с запятой, а все CSS-правила размещены в одну строку.

Объединение нескольких плагинов в одной задаче

До недавнего момента при работе в Gulp мы всегда поступали таким образом - “один плагин - одна задача”. Однако, Gulp гораздо гибче и мощнее, чем можно было бы подумать. В частности, в одной задаче можно объединить несколько ранее установленных плагинов именно благодаря поточности Gulp.

Чтобы было более понятно, разберем все вышесказанное на живом примере. Дополним задачу

1
sass
плагином конкатенации, чтобы “склеить” два результирующих файла
1
main.css
и
1
style.css
в один файл
1
compile.css
. Как вы уже догадались, для этой цели мы воспользуемся уже установленным ранее плагином
1
gulp-concat
.

Видоизменим задачу

1
sass
, добавив строку
1
.pipe(concat('compile.css'))
после строки с вызовом плагина
1
gulp-ruby-sass
:

// Sass Compile Task
  gulp.task('sass', function() {
    gulp.src('sass/**/*.scss')
    .pipe(sass({
      style: 'compressed'
    }))
    .pipe(concat('compile.css'))
    .pipe(gulp.dest('build/css'))
  });

Вновь запустим в консоли задачу

1
sass
:

$ gulp sass
  [15:14:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [15:14:44] Starting 'sass'...
  [15:14:44] Finished 'sass' after 9.05 ms
  [15:14:45] gulp-ruby-sass: directory
  [15:14:45] gulp-ruby-sass: write main.css
  [15:14:45] gulp-ruby-sass: write style.css

Посмотрим содержимое по пути

1
build/css
:

aaron@zmk ~/Projects/gulp_test $ ls build/css/
  compile.css  one.css

Файл

1
compile.css
появился по указанному пути. Взглянем на его содержимое в редакторе Sublime Text:

Компиляция gulp-ruby-sass и конкатенация Sass в CSS под Gulp

Пример получился не совсем удачный, но, тем не менее, наглядный. Видим, чтобы оба плагина отработали. Была произведена компиляция, а затем “склейка” двух файлов в один.

Конечно, благодаря поточности в Gulp, в одну задачу можно добавлять не два плагина, а гораздо больше.


В предыдущей статье “Gulp - знакомство и первый запуск”” мы познакомились с установкой менеджера Gulp и запуском первой задачи под него. В этой статье мы перейдем к еще более интересному материалу, в котором узнаем, как устанавливать и запускать плагины под Gulp на примере одного из них - gulp-uglify.

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

Каждый из плагинов - это код, решающий только одну задачу. Например, один плагин умеет сжимать изображения, другой сжимает js-файлы, третий сжимает css-файлы; еще один умеет компилировать scss-файлы в css-файлы. И так далее - список можно продолжать и продолжать.

Становиться понятно, что для конкретной задачи нам нужно установить нужный плагин и создать задачу (task) в файле

1
gulpfile.js
. А затем запустить Gulp на выполнение этой задачи. Конечно, задач может быть не одна, а несколько. Все зависит о того, какие именно задачи нам необходимо выполнять.

Давайте рассмотрим процесс установки плагинов и настройки задач на примере одного из них -

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

Все плагины под Gulp размещены по этому адресу - Gulp Plugins. В строке поиска нужно вводить имя искомого плагина, в результате получаем (или не получаем) страницу с описанием плагина и командой для его установки.

Устанавливаем gulp-uglify под Gulp

На странице плагина gulp-uglify описана команда установки этого плагина, которую мы повторим для себя, в своем проекте:

$ npm install --save-dev gulp-uglify

Опять таки, ключ

1
--save-dev
“говорит” менеджеру
1
npm
добавить плагин
1
gulp-uglify
в качестве зависимости в файл
1
package.json
:

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7",
    "gulp-uglify": "~0.3.1"
  }
}

Создаем задачу gulp-uglify под Gulp

Плагин

1
gulp-uglify
установлен и теперь самое время прописать в файле
1
gulpfile.js
именованную задачу (named task) под него. Надеюсь, уважаемый читатель помнит о двух типах задач под Gulp, описанных в предыдущей статье “Gulp - знакомство и первый запуск”.

Открываем файл

1
gulpfile.js
в редакторе кода (у меня это Sublime Text) и вносим туда следующие строки:

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
...
// Gulp Uglify
gulp.task('gulp-uglify', function(){
  gulp.src('js/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('build/js'))
});

В принципе, можно и не вводить вышеприведенные строки вручную, а просто скопировать их со страницы описания плагина gulp-uglify. Они размещены в блоке с заголовком Usage.

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

1
uglify = require('gulp-uglify')
- это создание переменной с именем
1
uglify
, в которую помещается плагин
1
gulp-uglify
. Обратите внимание на синтаксис этой строки и ее табуляцию - оба аспекта важны и их несоблюдение приведет к тому, что Gulp не будет работать. По большому счету, можно написать и так -
1
var uglify = require('gulp-uglify');
, но предыдущая запись является более правильной.

Далее идут строки для новой именованной задачи для Gulp. Имя задачи задаем произвольно и пусть оно будет таким -

1
gulp-uglify
. В теле callback-функции пропишем директорию, содержимое которой Gulp должен отслеживать -
1
gulp.src('js/*.js')
. В данном случае указываем, что Gulp должен следить за изменениями всех файлов с расширением .js, расположенных внутри директории
1
js
.

Следующая строка

1
.pipe(uglify())
получает в виде потока содержимое директории
1
js
и обрабатывает его с помощью плагина
1
gulp-uglify
, помещенного внутрь переменной
1
uglify
. Результат обработки передается в виде потока в строку
1
.pipe(gulp.dest('build/js'))
, которая сохраняет его по пути
1
build/js
.

Вот мы и разобрали суть задачи в Gulp! Ведь ничего сложного, правда?!

Запускаем задачу gulp-uglify в Gulp

Переходим от слов к делу и запустим на выполнение только что созданную нами задачу

1
gulp-uglify
. Не забываем, что именованные задачи в Gulp запускаются с указанием их имени:

$ gulp gulp-uglify
[21:47:43] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[21:47:43] Starting 'gulp-uglify'...
[21:47:43] Finished 'gulp-uglify' after 12 ms

Вуаля! Видим (по аналогии с предыдушим опытом запуска дефолтной задачи), что именованная задача

1
gulp-uglify
успешно запустилась, выполнилась за 12 миллисекунд и также успешно завершилась. По идее, теперь по пути
1
build/js
у нас должен располагаться минифицированный js-файл (в моем случае это был
1
jquery-1.11.1.js
).

Посмотрим и видим, что так оно и есть, файлик

1
jquery-1.11.1.js
помещен туда, куда мы и прописывали:

$ ls build/js/
jquery-1.11.1.js

А точно ли он минифицированный? Это легко проверить - открываем его в Sublime Text и наблюдаем такую картину:

Минифицированный с помощью gulp-uglify файл в Gulp

Полезные плагины под Gulp

Мы успешно установили и запустили плагин под Gulp - можно в очередной раз поздравить себя! В данном случае это был плагин

1
gulp-uglify
для минификации js-файлов.

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

1
gulp-uglify
.

Ниже я приведу примерный список наиболее полезных плагинов под Gulp, существующих на сегодняшний день:

  • 1
    
    gulp-minify-html
    // минификация HTML-файлов
  • 1
    
    gulp-minify-css
    // минификация CSS-файлов
  • 1
    
    gulp-csso
    // еще один плагин минификации CSS-файлов
  • 1
    
    gulp-uglify
    // минификация JS-файлов
  • 1
    
    gulp-sass
    // компиляция SCSS-файлов в CSS-файлы
  • 1
    
    gulp-ruby-sass
    // компиляции SCSS-файлов в CSS-файлы, более стабильный
  • 1
    
    gulp-concat
    // конкатенация (соединение нескольких файлов в один файл)
  • 1
    
    gulp-jshint
    // ???
  • 1
    
    gulp-livereload
    // запуск плагина LiveReload
  • 1
    
    gulp-watch
    // мониторинг файлов в фоновом режиме в Gulp
  • 1
    
    gulp-notify
    // вывод окна с уведомлением о событиях в Gulp
  • 1
    
    gulp-imagemin
    // сжатие изображений в Gulp
  • 1
    
    gulp-rename
    // переименование файлов в Gulp
  • 1
    
    gulp-plumber
    // настройка обработки ошибок в Gulp

В этой статье будем знакомиться с новым менеджером задач (task manager) под названием Gulp. Постепенно вместе с вами я пройду весь процесс - от установки Gulp до установки плагинов, создания задач, отслеживания ошибок и еще многое другое.

Но для начала узнаем, что такое Gulp. Это точно такой менеджер задач, как и Grunt. Оба они являются модулями под Node.js и устанавливаются с помощью пакетного менеждера

1
npm
.

Отличие от Grunt в том, что Gulp является переработкой Grunt. Как говорят его разработчики, цель создания была в том, чтобы выбросить из Grunt все лишнее. Кроме того, настройка Gulp значительно упростилась:

Gulp

На сегодня однозначным преимуществом Gulp перед Grunt является скорость обработки файлов - она в разы выше, чем у старенького Grunt.

Установка Gulp

Установка будет производиться под операционной системой Linux Mint 17 Cinnamon. Поэтому, пользователи Mac OS найдут все нижеприведенные команды абсолютно идентичными для себя. Подразумевается, что в системе уже установлен Node.js и менеджер пакетов npm.

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

1
-g
. Давайте так и поступим - произведем установку в системе:

$ sudo npm install -g gulp

Затем создадим тестовую директорию с именем

1
gulp_test
, в которой будет производить наше знакомство:

$ mkdir gulp_test
$ cd gulp_test/

В этой директории создадим файл

1
package.json
и пропишем в нем имя проекта и его версию:

$ touch package.json
$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {}
}

Этого будет достаточно. Теперь установим Gulp внутри директории

1
gulp_test
. При этом воспользуемся ключом
1
--save-dev
, который будет “говорить” менеджеру пакетов npm вносить в файл
1
package.json
все устанавливаемые им пакеты в качестве зависимостей проекта:

$ npm install --save-dev gulp

Теперь снова посмотрим на содержимое файла

1
package.json
и увидим, что npm добавил Gulp в качестве зависмости:

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7"
  }
}

Установка завершена и можно переходить к использованию этого менеждера задач.

Первый запуск Gulp

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

1
gulpfile.js
. Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

$ touch gulpfile.js

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя

1
default
, которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:

$ gulp

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

$ gulp name_of_task

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

$ ls -l | less

… выполняет следующее: результат команды

1
ls -l
перенаправляется для обработки в программу
1
less
. Редактор
1
less
автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

$ programm1 | programm2 | programm3 | programm4 | programm5

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

Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):

$ plugin1 | plugin2 | plugin3 | plugin4 | plugin5 | plugin6

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек

1
gulpfile.js
. Откроем его и пропишем в нем такие строки:

var gulp = require('gulp');

gulp.task('default', function(){
  console.log('Hello from Gulp!')
});

Первая строка

1
var gulp = require('gulp');
создает переменную
1
gulp
, в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл
1
gulpfile.js
и работать с Gulp в виде переменной
1
gulp
.

Вторая строка, начинающаяся с

1
gulp.task
- это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь
1
'default'
- это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция
1
function()
имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки -
1
console.log('Hello from Gulp!')
.

Давайте попробуем запустить наш менеджер задач, чтобы посмотреть, а работает ли он вообще? И как он работает? Для этого переходим в консоль и вводим в ней одну единственную команду

1
gulp
:

$ gulp
[19:37:53] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[19:37:53] Starting 'default'...
Hello from Gulp!
[19:37:53] Finished 'default' after 169 μs

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка

1
Using gulpfile ~/Projects/gulp_test/gulpfile.js
говорит о том, что Gulp для своей работы воспользовался файлом настроек
1
gulpfile
по указанному пути. Затем было запущено выполнение задачи с именем
1
default
-
1
Starting 'default'...
. Результатом выполнения этой задачи был вывод в консоль строки -
1
Hello from Gulp!
. И задача с именем
1
default
благополучно завершилась -
1
Finished 'default' after 169 μs
, причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя - мы только что создали и запустили на выполнение свою первую задачу под Gulp!