Gulp - знакомство и первый запуск

В этой статье будем знакомиться с новым менеджером задач (task manager) под названием Gulp. Постепенно вместе с вами я пройду весь процесс - от установки Gulp до установки плагинов, создания задач, отслеживания ошибок и еще многое другое.

Но для начала узнаем, что такое Gulp. Это точно такой менеджер задач, как и Grunt. Оба они являются модулями под Node.js и устанавливаются с помощью пакетного менеждера npm.

Отличие от Grunt в том, что Gulp является переработкой Grunt. Как говорят его разработчики, цель создания была в том, чтобы выбросить из Grunt все лишнее. Кроме того, настройка Gulp значительно упростилась:

На сегодня однозначным преимуществом Gulp перед Grunt является скорость обработки файлов - она в разы выше, чем у старенького Grunt.

Установка Gulp

Установка будет производиться под операционной системой Linux Mint 17 Cinnamon. Поэтому, пользователи Mac OS найдут все нижеприведенные команды абсолютно идентичными для себя. Подразумевается, что в системе уже установлен Node.js и менеджер пакетов npm.

Процесс инсталляции выполняется в два этапа. Первоначально Gulp устанавливается глобально, с помощью ключа -g. Давайте так и поступим - произведем установку в системе:

$ sudo npm install -g gulp

Затем создадим тестовую директорию с именем gulp_test, в которой будет производить наше знакомство:

$ mkdir gulp_test
$ cd gulp_test/

В этой директории создадим файл package.json и пропишем в нем имя проекта и его версию:

$ touch package.json
$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {}
}

Этого будет достаточно. Теперь установим Gulp внутри директории gulp_test. При этом воспользуемся ключом –save-dev, который будет “говорить” менеджеру пакетов npm вносить в файл package.json все устанавливаемые им пакеты в качестве зависимостей проекта:

$ npm install --save-dev gulp

Теперь снова посмотрим на содержимое файла package.json и увидим, что npm добавил Gulp в качестве зависмости:

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7"
  }
}

Установка завершена и можно переходить к использованию этого менеждера задач.

Первый запуск Gulp

Менеджер задач - само слово говорит за себя, это программа для управления задачами. В Gulp все задачи прописываются в одном единственном файле gulpfile.js. Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

$ touch gulpfile.js

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя default, которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:

$ gulp

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

$ gulp name_of_task

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

$ ls -l | less

… выполняет следующее: результат команды ls -l перенаправляется для обработки в программу less. Редактор less автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

$ programm1 | programm2 | programm3 | programm4 | programm5

Каждая из программ в этом списке будет производить обработку данных и передавать результат этой обработки другой программе, по цепочке.

Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):

$ plugin1 | plugin2 | plugin3 | plugin4 | plugin5 | plugin6

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек gulpfile.js. Откроем его и пропишем в нем такие строки:

var gulp = require('gulp');

gulp.task('default', function(){
  console.log('Hello from Gulp!')
});

Первая строка var gulp = require(‘gulp’); создает переменную gulp, в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл gulpfile.js и работать с Gulp в виде переменной gulp.

Вторая строка, начинающаяся с gulp.task - это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь ‘default’ - это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция function() имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки - console.log(‘Hello from Gulp!’).

Давайте попробуем запустить наш менеджер задач, чтобы посмотреть, а работает ли он вообще? И как он работает? Для этого переходим в консоль и вводим в ней одну единственную команду gulp:

$ gulp
[19:37:53] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[19:37:53] Starting 'default'...
Hello from Gulp!
[19:37:53] Finished 'default' after 169 μs

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка Using gulpfile ~/Projects/gulp_test/gulpfile.js говорит о том, что Gulp для своей работы воспользовался файлом настроек gulpfile по указанному пути. Затем было запущено выполнение задачи с именем default - Starting ‘default’…. Результатом выполнения этой задачи был вывод в консоль строки - Hello from Gulp!. И задача с именем default благополучно завершилась - Finished ‘default’ after 169 μs, причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя - мы только что создали и запустили на выполнение свою первую задачу под Gulp!