Gulp: Епізод 1 - Прихована загроза

the force will be with you. always

Сьогодні ми поговоримо про менеджер задач (task manager) на ім'я Gulp, а також налаштуємо його для основних задач, які необхідно буде виконувати frontend- розробнику.

Gulp ( англ. "ковток" ) - менеджер задач, орієнтованих на frontend - розробку, по суті - система управління усіма задачами, які ви звикли виконувати в процесі розробки, такими як компіляція стилів ( SASS, LESS ), оновлення сторінки в реальному часі без необхідності ручного перезавантаження ( livereload ), конкатенація і стиснення js - файлів, створення спрайтів зображень, та багато іншого. Наразі на сторінці пошуку плагінів в нас вказано 2641 плагін, тобто для більшості існуючих задач вже написані окремі плагіни. Така їх кількість зумовлена однією з особливостей підходу Gulp: один плагін - одна задача. Таким чином, при описі задачі ( далі - “таску” ) ми лише викликаємо конкретний плагін із його налаштуваннями.

Попередником Gulp був Grunt - обидва написані на Node.js але на відміну від Grunt, Gulp було написано із метою покращення, полегшення Grunt - із нього викинули усе лишнє, плюс до того для виконання операцій використали потоки - це дозволило у рази збільшити швидкість опрацювання задач.

Зробимо невеликий відступ в сторону і поговоримо про потоки. Припустимо, нам треба виконати такий набір задач:

  1. Взяти усі .js - файли проекту

  2. Перевірити їх код через JSHint

  3. Мінімізувати кожен файл

  4. Стиснути усі стиснені файли в app.js

  5. Зберегти його в папку /build

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

  1. Взяти .js - файл

  2. Перевірити його через JSHint

  3. Створити новий перевірений файл і зберегти його

  4. Взяти перевірений файл

  5. Мінімізувати файл

  6. Створити новий файл і зберегти його

  7. ....

  8. ... повторити дії вище для кожного файлу

  9. ....

  10. Взяти усі стиснути файли і об’єднати в один

  11. Створити новий файл і записати його в папку /build

Тобто Grunt діє за принципом: взяли файл -> виконали операції -> віддали файл.
Виглядає логічно, чи не так?

Але давайте поглянемо, як ці самі операції виконуються з використання потоків -
для наочності приведемо частину коду:

gulp.task('js', function () {
 return gulp.src('js/*.js')
   .pipe(jshint())
   .pipe(uglify())
   .pipe(concat('app.js'))
   .pipe(gulp.dest('build'));
});

При використанні потоків, ми формуємо його (потік) із одного або групи файлів, виконуємо з ним необхідні нам операції, і потім повертаємо вихідний файл. Звучить майже так само, як і без використання потоків, але перевага криється у тому, що ми не звертаємось кожен раз до окремого файлу, а працюємо з усім, що нам необхідно, у виді потоку.

Наприклад, задача, яку ми ставили вище - з використанням потоків буде виконуватись за таким алгоритмом:

  1. Взяти усі .js - файли ( сформувати потік )

  2. Перевірити потік через JSHint

  3. Стиснути файли потоку

  4. Об’єднати файли потоку в один

  5. Створити новий файл і записати його в папку /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

На цьому перша частина закінчується, у наступній статті ми створимо наші перші таски та розберемо їх детально. 

Розкажіть нам про свій проект!