Gulp: Епизод 1 - Скрытая угроза

the force will be with you. always

Сегодня мы поговорим о менеджер задач (task manager) на имя Gulp, а также настроим его для основных задач, которые необходимо будет выполнять frontend- разработчику.​

Gulp (англ. "Глоток") - менеджер задач, ориентированных на frontend - разработку, по сути - система управления всеми задачами, которые вы привыкли выполнять в процессе разработки, такими как компиляция стилей (SASS, LESS), обновление страницы в реальном времени без необходимости ручной перезагрузки (livereload), конкатенация и сжатия js - файлов, создание спрайтов изображений и многое другое. Сейчас на странице поиска плагинов у нас указан 2641 плагин, то есть для большинства существующих задач уже написаны отдельные модули. Такое их количество обусловлено одной из особенностей подхода Gulp: один плагин - одна задача. Таким образом, при описании задачи (далее - "таск") мы только вызываем конкретный плагин с ее настройками.

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

Сделаем небольшое отступление в сторону и поговорим о потоках. Допустим, нам надо выполнить такой набор задач:​

  1. Взять все .js - файлы проекта​

  2. Проверить их код через JSHint​

  3. Минимизировать каждый файл

  4. Сжать все сжатые файлы в app.js​

  5. Сохранить его в папку / build​

При использовании Grunt порядок выполнения задач для каждого файла будет таким:

 

  1. Взять .js - файл​

  2. Проверить его через JSHint​

  3. Создать новый проверенный файл и сохранить его​

  4. Взять проверенный файл​

  5. Минимизировать файл

     

  6. Создать новый файл и сохранить его​

  7. ....

  8. ... Повторить действия выше для каждого файла​

  9. ....

  10. Взять все сжать файлы и объединить в один​

  11. ССоздать новый файл и записать его в папку / build​

То есть Grunt действует по принципу: взяли файл -> выполнили операции -> отдали файл.
Выглядит логично, не так ли?​

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

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

При использовании потоков, мы формируем его (поток) с одного или группы файлов, выполняем с ним необходимые нам операции, и затем возвращаем исходный файл. Звучит почти так же, как и без использования потоков, но преимущество кроется в том, что мы не обращаемся каждый раз в отдельный файл, а работаем со всем, что нам необходимо, в виде потока.​

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

  1. Взять все .js - файлы (сформировать поток)​

  2. Проверить поток через JSHint​

  3. Сжать файлы потока​

  4. Объединить файлы потока в один​

  5. Создать новый файл и записать его в папку / build​

Как видим, за счет уменьшения количества обращений к файловой системе, мы получаем прирост в быстродействии в несколько раз. Ниже мы сравним быстродействие на примере реальных задач.​

Перейдем к установке и настройке Gulp​

Предварительно для установки нам необходимо Node.js.
Для установления Node.js на Windows и Mac - на сайте разработчика выбрать пакет установщика для вашей системы и установить как обычную программу.​

Установка с Linux - в командной строке выполнить:​
sudo apt-get install nodejs

Далее установим сам GULP - его надо сначала установить глобально (для машины) и локально (для проекта) - в терминале выполнить - sudo npm install -g gulp​

-- Метка -g означает -global, то есть глобально для всей машины.​

В дальнейшем для выполнения команд в командной строке Windows команды sudo не нужно, только для Linux.

Перед тем, как устанавливать пакеты для своего проекта, поговорим о файлах, которые будут основой для нашей сборки - это файлы gulpfile.js и package.json.​

Файл gulpfile.js служит для описания всех тасков нашего проекта, то есть по сути входной точкой для gulp.
Будет выглядеть примерно вот так:​

Вторым таким файлом является файл package.json - в отличие от предыдущего, он создается автоматически при инициализации npm в проекте, в нем сохранена информация о проекте - его имя, версия, а также названия и версии пакетов, установленных в проекте через npm - так называемые зависимости. Выглядит следующим образом:​

Наличие этих двух файлов по сути позволяет развернуть Gulp для любого проекта, имея только два файла, без необходимости вспоминать, какие модули, которых версий были установлены в нашей предыдущей сборке - при установке в новом месте с package.json подтянутся именно те версии пакетов, нам неоходимы. Для этого вам нужно будет поместить файл package.json в корень проекта и выполнить в терминале команду npm install - npm установит все, что было указано необходимым в package.json​

Вернемся к установлению Gulp - перейдем в терминале в папку проекта, и установим Gulp туда​
npm install --save-dev gulp

- Метка --save означает, что установлен пакет сразу будет записан в package.json - метка -dev указывает на то, что при установке пакета, его зависимость запишется в devDependencies, а не в dependencies.
devDependencies - пакеты, которые необходимы непосредственно при разработке (gulp, gulp-sass, и т.д).
dependencies - пакеты, от которых ваш проект зависит непосредственно, как правило - библиотеки и фреймворки (expressjs, jquery, backbone).

После установления gulp, установим пакеты, которые помогут нам в отслеживании изменений в файлах, для обработки ошибок и для работы с браузерной приставками​ - gulp-sass, gulp-livereload, gulp-autoprefixer, gulp-util

sudo npm install --save-dev gulp-sass gulp-livereload gulp-autoprefixer gulp-util

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

Расскажите нам о своем проекте!