Найбільш потрібні плагіни для 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.