Начало работы с Gulp.js

Java, Linux, VPS | Amber | Комментировать запись

Что такое 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 и настраивать запуск задач другими задачами.