Просто блог, і нічого більше

Найбільш потрібні плагіни для Gulp

У веб-розробці існує дуже цікавий інструмент, що дозволяє звести роботу developer’а до мінімума. Цим “автоматизатором” багатьох процесів є таск-раннер Gulp, що став переродженим Grunt’ом, який працює у рази швидше, ніж “папірєднік”. Сьогодні поговоримо про найбільш потрібні плагіни для Gulp’а, які особисто я використовую при збиранні проекту до купи.

gulp-autoprefixer

autoprefixer – дуже корисний плагін, що дозволяє автомвтично розставити вендорні префікси для CSS, і що цікаво, плагін є одним із доповнень для проекту PostCSS.

gulp-browser-sync

gulp-browser-sync – дуже важливий інструмент для підвищення продуктивності розробника. Плагін дохволяє автоматично обновляти сторінку у всіх браузерах на всіх пристроях при змінами не тільки клієнтських або навіть серверних файлів. А плюс до всього синхронізує позицію скролінгу і заповнені дані в формах.

gulp-useref

gulp-useref – парсит специфічні блоки і конкатенуються описані в них стилі та скрипти.

gulp-csso

gulp-csso – відмінний CSS мініфікатор. На сьогоднішній день існує цілий ряд CSS компресорів і порівняльна таблиця (GitHub) по ним. Але недавно я побачив кращу Shorthand утиліту без Gulp, яка робить приблизно наступне:

gulp-email-design

gulp-email-design – безцінний інструмент при верстки листів, який переводить всі CSS стилі в інлайновие, автоматично змінюючи все шляху до файлів, опціонально вміє завантажувати зображення на CDN і навіть відсилати листи на пошту.

gulp-watch

gulp-watch – наріжний камінь в плагін системі Gulp. Стежить за всіма зазначеними файлами або цілими директоріями і в разі будь-яких змін виконує описані в конфігураціях таски.

gulp-uglify

gulp-uglify — JavaScript компрессор.

gulp-iconfont

gulp-iconfont – чудовий плагін для роботи з веб-шрифтами. Вміє створювати WOFF, WOFF2, EOT, TTF файли з SVG.

gulp-responsive

gulp-responsive – простий спосіб згенерувати адаптивні зображення під необхідні дозволи пристроїв із зазначенням відповідних префіксів в найменуванні.

Компілятори для стилів

  • gulp-less — LESS в CSS.
  • gulp-sass — SASS/SCSS в СSS.
  • gulp-compass — SASS с Compass в CSS.
  • gulp-stylus — Stylus в CSS.
  • gulp-coffee — CoffeeScript в JavaScript.
  • gulp-jade — Jade в HTML.