Самі потрібні плагіни для Grunt



Доброго часу доби, всім! Хтось розумний, не пам'ятаю в якій статті саме на Хабре, буквально нещодавно розмірковував про процесі розробки з явним закликом автоматизувати все, що тільки можна автоматизувати. Та краще один раз витратити час на автоматизацію, щоб потім економити його на протязі всього проекту.

У веб-розробників є прекрасний інструмент для автоматизації маси задач, який називається Grunt. І моя пристрасть до таксономії змусила себе зібрати величезну колекцію майже 100 цінних плагінів для цього збирача. Думаю багато хто вже використовує Grunt знайдуть для себе щось потрібне, а хто ні, дивлячись на можливості, отримає хорошу мотивацію встановити його і зрозуміти, як ця штука працює.

А ще я виклав підбірку на GitHub, щоб кожен міг поповнити колекцію.



HTML&CSS



autoprefixer — один з найбільш корисних плагінів, який автоматично розставляє префікси до CSS властивостями, виходячи зі статистики caniuse. Важливо сказати, що Автопрефиксер це лише один з безлічі додатків в рамках проекту PostCSS від Злих Марсіан.

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

grunt-html-build
Універсальний помічник у верстці. На відміну від незаслужено більш популярного grunt-processhtml, даний плагін вміє не тільки об'єднувати скрипти і стилі, але і створювати повноцінні шаблони/блоки для вашого HTML.

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

grunt-uncss і grunt-ucss — одночасно два кращих рішення для оптимізації CSS файлів. Обидва плагіна аналізують HTML код і знаходять всі невживані і продубльовані стилі. Другий проект від команди Opera Software.

grunt-revizor — мега крутий компресор від MailRu, який не тільки минифицирует CSS, але і скорочує назвах всіх класів в HTML, CSS і JavaScript файлів.

На цей момент я хочу зупинити детальніше. На сьогоднішній день існує цілий ряд CSS компресорів і порівняльна таблиця GitHub). Але нещодавно я бачив оптимізатор, який виконує приблизно наступне:

a {
font-family: Arial;
font-style: italic;
font-size: 14px;
line-height: 18px; 
font-weight: bold;
}


=>

a {
font: italic 700 14px/18px Arial;
}


І також для
background
та інших комбінованих властивостей. Але на жаль, я його благополучно втратив. Якщо хтось побачить щось подібне, прохання зробити pull-request, оскільки подібний інструмент разом з Revizor стане кращим компресором CSS-коли.

grunt-contrib-htmlmin — простий HTML минификатор.

grunt-penthouse і grunt-criticalcss — автоматично знаходять Critical Path у вашому проекті. Важливий момент з точки зору продуктивність, про що докладніше написано тут.

grunt-csscomb — облагороджує структуру ваших CSS. Ще є grunt-styleguide для генерації стайлгайдов.

grunt-contrib-csslint — CSS лінтер.

grunt-html — HTML валідатор на основі валідатора від W3C.

JavaScript



grunt-autopolyfiller — мега крутий плагін, який схожий на Autoprefixer і підбирає всі необхідні полифилы для JavaScript, щоб ви могли використовувати останні стандарти ECMAScript вже сьогодні.

grunt-jsfmt — дуже корисний плагін для роботи з JavaScript від команди Rdio, який дозволяє шукати конкретні фрагменти, форматувати та проводити масові зміни в коді. Також існує grunt-jsbeautifier.

grunt-jscs — JavaScript Code Style. Чудовий інструмент з безліччю конфігурацій для перевірки вашого коду згідно з існуючими стайлгайдами від jQuery, Яндекса, Google, Airbnb та інших.

grunt-modernizr — допомагає скласти правильну архітектуру проекту на основі Modernizr.js залежно від можливостей браузера.

grunt-contrib-requirejs і grunt-browserify — оптимізують роботу RequireJS і Browserify відповідно.

grunt-wiredep — підключає всі необхідні Bower компоненти.

grunt-plato — надає аналітику за вашим кодом з різними метриками у вигляді красивих графіків.

grunt-complexity — перевірка на якість коду заснована на алгоритмах Halstead і Cyclomatic.

fixmyjs — автоматично виправляє прості помилки в коді після лінту виконаного на основі JSHint grunt-contrib-jshint).

grunt-jsonlint і grunt-yamllint — валідатори JSON і YAML файлів.

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

grunt-contrib-concat — конкатенація файлів.

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
<symbol>
для подальшого використання.

imacss — дуже зручна утиліта, яка перетворює підключені в CSS зображення PNG, JPG, SVG Data URI.

grunt-contrib-imagemin, grunt-imageoptim і grunt-tinypng для стиснення зображень.

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-conventional-changelog — генерує список змін на основі комітів в Git. А є grunt-bump, який стежить таким же чином стежить за репозиторієм і оновлює package.json.

grunt-remove-logging — автоматично видаляє логи.

node-matchdep — допомагає правильно описати залежності.

grunt-phantomas — чудовий інструмент для вимірювання продуктивності проекту.

grunt-preprocess — препроцесор, який посилається на встановлені конфігурації.

grunt-rev — корисний плагін для роботи з версіями.

grunt-open — відкриває та URL файли у залежності від зазначених опцій.

grunt-contrib-connect — простий веб-сервер для статичних сайтів.

grunt-exec і grunt-shell — дозволяють запускати Shell команди.

grunt-ssh — забезпечує можливість підключення по SSH і SFTP.

grunt-contrib-compress — архівує папки і файли.

grunt-contrib-clean і grunt-contrib-copy — відповідно очищають і копіюють зазначені исходники.

Компілятори



grunt-contrib-less — LESS в CSS.
grunt-contrib-sass — SASS/SCSS в СSS.
grunt-contrib-compass — SASS з Compass в CSS.
grunt-contrib-stylus — Stylus в CSS.
grunt-contrib-coffee — CoffeeScript в JavaScript.
grunt-contrib-jade — Jade в HTML.
grunt-contrib-handlebars — Handlebars шаблони JST.
grunt-contrib-jst — Underscore шаблони JST.
grunt-react — Facebook React's JSX шаблони JST.
grunt-nunjucks — Nunjucks шаблони JST.
grunt-dustjs — Dust шаблони JST.
grunt-html2js — AngularJS шаблони JST.

Наостанок



psi — PageSpeed Insights with reporting.
tmi — TMI (Too Many Images) — discover your image weight on the web.
ngrok — Introspected tunnels to localhost.
pageres — зручна утиліта для створення скріншотів сайтів в різних дозволах.
Можливо, деякі методи автоматизації вам буде зручніше використовувати прямо в редакторі — Кращі плагіни для SublimeText.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.