Gulp: Епізод 3 - Повернення Джедая

the force will be with you. always

Це заключна стаття з циклу статей про gulp, в ній ми розглянемо питання швидкодії а також деякі інші особливості роботи з gulp.

Повернемося до питання швидкодії, про яку я згадував на самому початку - порівняємо швидкість виконання задач у трьох випадках - при використанні SASS на Ruby, про який було написано в нашій статті, Grunt та Gulp. Завданням буде скомпілювати набір .scss - файлів.

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

  1. 1. SASS на Ruby
  2. 2. Grunt
  3. 3. Gulp

Перевага у швидкодії при використанні gulp - очевидна.

Виконання задач по порядку

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

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

Наочно: 

Наш таск ‘watch’ відслідковує зміни у файлах, коли такі відбуваються, він запускає таски ‘sass’ та ‘cssmin’.

Зверніть увагу! Для досягнення синхронності виконання задач, нам необхідно:

  1. a) повертати потік ( таск ‘sass’ ) - в такому випадку ми будемо знати, коли цей таск закінчився.

  2. б) явно вказати, що таск ‘cssmin’ залежний від виконання таску ‘sass’ - 

Останньою темою, яку розберемо сьогодні, буде опрацювання помилок, які ми, так чи інакше, будемо допускати при написанні стилів. Допустимо, ми написали завдання на компіляцію стилів та успішно його використовуємо.

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

Після цього, виправивши помилку і запустивши компіляцію, gulp не реагує, він просто “відвалюється” і нам доводиться його перезапускати - переключитись на консоль (alt + f12), стрілкою вверх обрати задачу gulp та продовжити працювати. Хоч такі ситуації виникають відносно рідко, але створюють додаткові незручності.

Як бачимо, gulp видав помилку - Unhandled ‘error’ event - ми ніяк не опрацьовуємо помилки. Тому для таких потреб можна використати плагін gulp-util, а конкретніше його можливість повертати логи. Таким чином, при виникненні помилки, вона буде оброблятись нашим плагіном а ми, в свою чергу, лишаємося головного болю з перезапуском gulp.

Результат - плагін виводить інформацію про помилку, а gulp продовжує працювати. 

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

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