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

9 Октября 2016
Eugene Shuliakivskyi
Верстка
4501

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 - из него выбросили все лишнее, плюс к тому для выполнения операций использовали потоки - это позволило в разы увеличить скорость обработки задач.

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

Взять все .js - файлы проекта
Проверить их код через JSHint
Минимизировать каждый файл
Сжать все сжатые файлы в app.js
Сохранить его в папку / build

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

Взять .js - файл
Проверить его через JSHint
Создать новый проверенный файл и сохранить его
Взять проверенный файл
Минимизировать файл
Создать новый файл и сохранить его
....
... Повторить действия выше для каждого файла
....
Взять все сжать файлы и объединить в один
ССоздать новый файл и записать его в папку / build

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

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

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

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

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

Взять все .js - файлы (сформировать поток)
Проверить поток через JSHint
Сжать файлы потока
Объединить файлы потока в один
Создать новый файл и записать его в папку / 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

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