Gulp: Епизод 1 - Скрытая угроза
- 9 Октября 2016
- Eugene Shuliakivskyi
- Верстка
- 4702
Сегодня мы поговорим о менеджер задач (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
На этом первая часть заканчивается, в следующей статье мы создадим наши первые таски и разберем их подробно.