Что такое Gulp.js?
Gulp.js – это сборщик проектов, способный значительно ускорить разработку путём автоматизации задач. Его главной целью является автоматизация трудоемких задач, повторяющихся в процессе разработки приложения. Grunt.js – это еще один популярный инструмент для автоматизации запуска задач и процессов фронт-энда.
Вместо конфигураций Gulp.js использует код, что делает его очень простым в управлении. Кроме того, он использует stream, благодаря чему он такой быстрый. Главное отличие Gulp и Grunt состоит в том, что вместо создания input/output для каждого плагина Gulp передаёт исходные файлы через все установленные плагины, чтобы затем создать выходной файл.
Примечание: Также читайте руководство «Автоматизация задач при помощи Grunt и Node.js».
В данном руководстве показано, как установить Gulp.js на виртуальный выделенный сервер и создать небольшой тестовый проект.
Примечание: Для выполнения руководства нужно предварительно установить Node.js и NPM (Node Package Manager). Инструкции по установке этих программ можно найти в этой статье.
Установка Gulp.js
Процесс установки Gulp.js крайне прост. Поскольку ранее на сервер был установлен менеджер пакетов NPM, нужно просто запустить команду:
npm install gulp -g
Эта команда выполнит глобальную установку Gulp.js на виртуальный выделенный сервер и сделает его доступным из командной строки.
Теперь попробуйте создать проект и добавить к нему необходимые плагины.
Создание проекта Gulp.js
Итак, чтобы ознакомиться с функциями Gulp.js, создайте небольшой проект по имени Gus и сосредоточьте внимание на вопросах моделирования. Создайте папку проекта и перейдите неё:
mkdir Gus
cd Gus
Node Package Manager позволяет объявлять библиотеки, необходимые приложению, в файле package.json, который позже можно переслать в коммите в репозиторий с контролем версий. Этот файл можно создать вручную или с помощью утилиты командной строки. в данном руководстве используется второй вариант, потому что это исключает вероятность синтаксических ошибок в файле. Выполните следующую команду и следуйте инструкциям на экране:
npm init
Новый файл package.json со стандартными настройками имеет такой вид:
{
"name": "Gus",
"version": "0.0.0",
"description": "My Gus project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
Теперь в этот файл можно внести библиотеки Gulp.js для проекта и автоматически добавить их как devDependencies. Но сначала нужно определить, какие именно библиотеки необходимы проекту.
В данном руководстве поставлена следующая задача: компиляция файлов sass, autoprefix файлов css, а затем их уменьшение.
Чтобы Gulp.js мог компилировать файлы sass, нужно сначала установить на сервер Ruby, Ruby Gems и Sass. Это можно сделать с помощью следующих команд:
sudo apt-get update
sudo apt-get install ruby-full rubygems
sudo gem install sass
Затем запустите следующую команду, чтобы установить Gulp для проекта и сохранить его как devDependency:
npm install gulp --save-dev
Теперь запустите следующую команду, чтобы установить библиотеки, необходимые для выполнения вышеперечисленных задач:
npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-rename --save-dev
Выполнив эту команду, обратите внимание:
- В root-каталоге проекта появилась папка node_modules, которая содержит все установленные пакеты;
- Файл package.json ссылается на них как на devDependencies.
Автоматизация задач при помощи Gulp.js
Все задачи и требования к ним нужно внести в файл по имени gulpfile.js, который должен находиться в root-каталоге проекта. Создайте этот файл и поместите в него следующий блок кода:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename');
Как видите, этот код создаёт несколько переменных, в которых перечислены все вышеупомянутые библиотеки. Среди них ест библиотека rename, которая позволяет переименовывать файлы.
Под этим объявлением можно создать задачи. Gulp позволяет создавать несколько задач и даже настраивать их для запуска других задач; но в данном примере создайте всего одну задачу по имени styles:
gulp.task('styles', function() {
return gulp.src('sass/*.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'));
});
Для создания задачи используется функция gulp.task. Её функция обратного вызова – gulp.src, которая находит исходные файлы, на которые нужно выполнить задачи. В данном случае файлы .scss находятся в папке sass/ в корне проекта. Эти файлы в свою очередь передаются через плагины Gulp и отправляются к месту назначения, установленному в gulp.dest.
Другими словами, эти задачи выберут все файлы .scss из папки и скомпилируют их в css, прежде чем запускать их в autoprefixing. Затем эти файлы копируются и переименовываются при помощи суффикса .min в конце, после чего они проходят через уменьшающий плагин и помещаются в каталог css/.
Чтобы проверить это, создайте два каталога (sass и css) и файл .scss по имени styles.scss в папке sass/. Поместите в него такой код:
$color: #eee;
#box {
color : $color;
box-sizing: border-box;
}
Как видите, это базовый синтаксис SASS, содержащий свойство CSS пока что без префикса. Запустите задачу styles. В root-каталоге проекта запустите следующую команду:
gulp styles
В окне терминала появится что-то вроде:
[gulp] Using file /path/to/project/Gus/gulpfile.js
[gulp] Working directory changed to /path/to/project/Gus
[gulp] Running 'styles'...
[gulp] Finished 'styles' in 224 ms
Проверьте каталог css/, он должен содержать два файла: style.css и style.min.css. Второй файл должен содержать такой код:
#box {
color: #eeeeee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Как видите, Gulp сам скомпилировал файл и добавил префикс. Теперь попробуйте настроить Gulp для отслеживания изменений в файлах .scss и запуска задач после сохранения этих файлов.
Для этого создайте новую задачу под уже существующей:
gulp.task('watch', function() {
// Watch the sass files
gulp.watch('sass/*.scss', ['styles']);
});
Эта задача отслеживает изменения в файлах, находящихся в указанных каталогах, и запускает задачи при обновлении этих файлов. Запустите задачу watch через командную строку:
gulp watch
Она будет отслеживать соответствующий каталог и запускать задачу styles до тех пор, пока вы не остановите её.
ctrl + c
Заключение
Сборщик проектов Gulp.js способен значительно ускорить разработку, автоматизируя запуск задач. Для Gulp.js было разработано большое количество плагинов. Кроме того, Gulp.js позволяет управлять файлами javascript и настраивать запуск задач другими задачами.