Gulp Introduction

gulp.md

Введення в Gulp

Нсамперед, Gulp потребує встановленого Node.JS та менеджера пакетів NPM. Для цього достатньо встановити будь-яку версію, завантаживши її з веб-сайту або через системний пакетний менеджер.

Після встановлення Node, потрібно встановити Gulp в глобальний простір, щоб команди були доступними із командного рядка.

npm install -g gulp

Примітка: Якщо команда працює з помилкою, варто запустити з правами адміністратора (через sudo, на системах з ядром Linux).

Створення проекту

Для створення нового проекту з використанням системи збірки Gulp потрібно створити файл package.json, який визначить поточний репоситорій, як модуль Node.JS. Для цього потрібно ввести в директорії проекту команду npm init, яка шлахом простого опитування створить потрібний файл.

---

Наприклад, створимо простий проект, в якому буде виконуватися компіляція стилів, написаних на LESS.

Для початку створимо директорію та перейдемо в неї:

mkdir gulp-less-test
cd gulp-less-test

Далі створюємо новий файл package.json:

npm init

Після короткого опитування файл виглядатиме приблизно так:

{
  "name": "gulp-less-test",
  "version": "1.0.0",
  "description": "Test project with Gulp and LESS",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "less"
  ],
  "author": "John Doe (www.example.com)",
  "license": "MIT"
}

Більше про package.json можна дізнатися в документації Node.JS.

Встановлення Gulp

Для роботи з Gulp, окрім глобальної області, його потрібно встановити в локальну область проекту:

npm install --save-dev gulp

Після виконання команди в проекті з'явиться директорія node_modules, в якій зберігаються всі встановлені пакети Node.JS, а також, пакети, яких вони потребують (залежності, або dependencies). А також в файлі package.json в кінці з'явиться приблизно наступний текст:

"devDependencies": {
  "gulp": "^3.9.1"
}

Вище описаний розділ package.json позначає, що для розробки проекту потрібний модуль gulp. NPM додав цей рядок, оскільки ми вказали параметр --save-dev, що відповідає за встановлення цієї залежності.

Надалі, при виконанні npm install (без назв пакетів) буде встановлено всі пакети, що перераховані в розділах dependencies та devDependencies файлу package.json.

Встановлення пакетів Gulp

Пакети встановлюються аналогічно до самого менеджера задач. Наприклад в нашому проекті потрібно написати:

npm install --save-dev gulp-less

Як правило, пакети для Gulp починються з префікса gulp-.

Написання базової конфігурації

Базова конфігурація для нашого проекту вигяладатиме приблизно наступним чином:

const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('default', () => {
  return gulp.src('path/to/less/file.less')
    .pipe(less())
    .pipe(gulp.dest('path/to/compiled/css/file.css'));
});

Тепер за порядком:

В перших двох рядках підключаються модулі, які нам потрібні для роботи: gulp та gulp-less, і зберігаються у відповідні змінні.

В четвертому рядку створюється завдання для Gulp з назвою default, та функцією, що передана другим параметром. Завдання побудоване таким чином:

1. gulp.src() бере файли, що відповідяють glob-шаблону, та передає їх в потік.

2. Метод pipe() приєднує до потоку модуль, переданий парметром, який отримує файли та обробляє їх.

   Відповідно, переданий модуль less() компілює *.less в *.css.

   А модуль gulp.dest() зберігає отримані файли за вказаним шляхом.

Виконання завдань

Для виконання завдань потрібно виконати команду gulp <список завдань>. Завдання з назвою default можна запустити виконавши команду gulp без параметрів.

Тобто, для нашого проекту із компіляцією LESS достатньо виконати:

gulp

Якби ми назвали завдання, наприклад, less, потрібно було б написати:

gulp less