Найпотрібніші плагіни для Grunt
Доброго часу доби, всім! Хтось розумний, не пам'ятаю в якій статті саме на Хабрі, буквально нещодавно розмірковував про процес розробки із явним закликом автоматизувати все, що можна автоматизувати. І краще один раз витратити час на автоматизацію, щоб потім заощаджувати його протягом усього проекту.
Веб-розробники мають чудовий інструмент для автоматизації маси завдань, який називається Grunt. І моя пристрасть до таксономії змусила себе зібрати величезну колекцію майже зі 100 цінних плагінів для цього збирача. Думаю багато хто вже використовує Grunt знайдуть для себе щось потрібне, а хто ні, дивлячись на можливості, отримає хорошу мотивацію встановити його та зрозуміти як ця штука працює.
А ще я виклав добірку на GitHub, щоб кожен міг поповнити колекцію.
autoprefixer — один із найкорисніших плагінів, що автоматично розставляє префікси до CSS властивостей, виходячи зі статистики caniuse. Важливо сказати, що Автопрефіксер це лише один із багатьох доповнень у рамках проекту PostCSS від Злих Марсіан.
grunt-browser-sync - ймовірно, найпотрібніший інструмент з точки зору підвищення продуктивності веб-розробників. BrowserSync створює підключення, після чого здійснює автооновлення сторінки у всіх браузерах на всіх пристроях при змінах не тільки клієнтських або серверних файлів. А плюс до всього синхронізує позицію скролінгу та заповнені дані у формах.
grunt-html-build – універсальний помічник у верстці. Плагін вміє поєднувати вихідні файли та створювати повноцінні шаблони/блоки для вашого HTML. Ще для схожих завдань дуже гарний grunt-include-replace.
grunt-email-design — безцінний інструмент при верстках листів, який перекладає всі CSS стилі в інлайнові,автоматично змінюючи всі шляхи до файлів, опціонально вміє завантажувати зображення на CDN і навіть надсилати листи на пошту. Є ще окремий grunt-email-boilerplate.
grunt-uncss і grunt-ucss — одночасно два найкращі рішення для оптимізації CSS файлів. Обидва плагіна аналізують HTML код і знаходять всі стилі, що не використовуються і продубльовані. Другий проект від команди Opera Software.
grunt-penthouse і grunt-criticalcss – автоматично знаходять Critical Path у вашому проекті. Важливий момент з точки зору продуктивності, про що докладніше написано тут.
grunt-csscomb — покращує структуру ваших CSS. Ще є grunt-styleguide для генерації стайлгайдів.
grunt-html – HTML валідатор на основі валідатора від W3C.
grunt-modernizr – допомагає скласти правильну архітектуру проекту на основі Modernizr.js залежно від можливостей браузера.
grunt-express – запускає Express.js веб-сервер.
grunt-contrib-requirejs та grunt-browserify – оптимізують роботу RequireJS та Browserify відповідно.
grunt-shipit – автоматизує deploy за допомогою Shipit.
grunt-plato – надає аналітику за вашим кодом з різними метриками у вигляді красивих графіків.
grunt-complexity — перевірка якості коду заснована на алгоритмах Halstead і Cyclomatic.
fixmyjs - автоматично виправляє прості помилки в коді після лінта виконаного на основі JSHint (grunt-contrib-jshint).
grunt-jscpd – для пошуку дублікатів у коді.
grunt-jsonlint та grunt-yamllint — валідатори JSON та YAML файлів.
Unit тести
grunticon — цінний плагін, який дозволяє генерувати спрайти з SVG, перекладати їх у PNG, записувати всі Data URI та підключати потрібний формат залежно від можливостей браузера.
grunt-webfont – чудовий плагін для роботи з веб-шрифтами. Вміє створювати WOFF, WOFF2, EOT, TTF файли із SVG. Працює на Mac, Windows та Linux. Відображає результат у демо сторінці будь-якої варіації: CSS/Sass/LESS/Stylus, у Bootstrap або BEM стилістиці, з лігатурами та Data URI.
grunt-responsive-images — простий спосіб згенерувати адаптивні зображення під необхідні дозволи пристроїв із зазначенням відповідних префіксів у найменуванні. А grunt-responsive-images-extender робить те саме, але з вибіркою по селекторах і записом в srcset.
grunt-sharp – найшвидший модуль для роботи з JPEG, PNG, WebP та TIFF зображеннями. Плагін вміє змінювати розмір, орієнтацію, фон, альфа-канал та багато іншого.
grunt-svgstore — об'єднує всі SVG файли, що підключаються, і записує їх в HTML як для подальшого використання.
imacss — дуже зручна утиліта, яка автоматично перетворює підключені до CSS зображення PNG, JPG, SVG у Data URI.
grunt-spritesmith – автоматична генерація спрайтів.
assemble - даний плагін є цілим генератором статичних сайтів для Node.js, Grunt.js і Yeoman з шаблонизатором Handlebars. Використовується в таких проектах як Zurb Foundation, Zurb Ink, H5BP/Effeckt, Less.js/lesscss.org, Topcoat, Web Experience Toolkit та ін.
jit-grunt - JIT (Just In Time) підвантажувач. Деякі розробники критикують Grunt за тривалий час роботи при безлічі підключених файлів. До речі, саме з цієї причини з'явився Gulp, але цей плагін повністю вирішує проблему продуктивності. Також хочу згадати grunt-concurrent, призначений для тієї ж мети та grunt-gulp, який дозволяє запускати Gulp плагіни для Grunt.
grunt-contrib-watch — наріжний камінь у плагінній системі Grunt.Слідкує за всіма вказаними файлами або цілими директоріями та у разі будь-яких змін виконує описані у конфігураціях таски.
grunt-notify - виводить помилки при складанні Grunt у вигляді системних повідомлень, а головне те, що працює для різних операційних систем.
grunt-git – дозволяє використовувати Git команди.
grunt-githooks – прив'язує Git Hooks до Grunt тяг.
grunt-gitbook — створюйте документацію за допомогою приголомшливої утиліти GitBook.
grunt-jsdoc – генератор документації, працює на основі JSDoc3.
grunt-rev – корисний плагін для роботи з ревізіями.
grunt-release та grunt-version – дозволяють керувати версіями проекту.
grunt-conventional-changelog – генерує список змін на основі коммітів у Git. А є ще grunt-bump, який стежить так само стежить за репозиторієм та оновлює package.json та grunt-dev-update для оновлення самих пакетів.
grunt-wiredep - включає всі необхідні Bower компоненти.
grunt-proxy та grunt-connect-proxy — connect support for proxying API calls during development.
grunt-phantomas – чудовий інструмент для вимірювання продуктивності проекту.
grunt-preprocess - препроцесор, що посилається на встановлені конфігурації.
time-grunt — Відображає час виконання таска.
load-grunt-config — бібліотека, яка дозволяє розділяти файл конфігурації для різних таксків.
grunt-newer — запускає таски тільки для файлів, що змінилися.
grunt-open — відкриває URL-адресу та файли залежно від зазначених опцій.
grunt-contrib-connect — це простий веб-сервер для статичних сайтів.
grunt-exec і grunt-shell дозволяють запускати Shell команди.
grunt-ssh - забезпечує можливістьпідключення по SSH та SFTP.
grunt-usebanner - додає банери (копірайт або ASCII заголовки) у вихідних файлах і grunt-figlet для роботи з цим.
grunt-file-info — відображає розміри та версії файлів у зручному для читання вигляді.
Компілятори
Насамкінець
А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»