Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.
У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Grunt. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Grunt найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.
А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.
HTML&CSS
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-revizor — мега крутой компрессор, который не только минифицирует CSS, но и сокращает названиях всех классов в HTML, CSS и JavaScript файлах. На сегодняшний день существует целый ряд CSS компрессоров и сравнительная таблица (GitHub) по ним. Но недавно я увидел лучшую Shorthand утилиту без Grunt, которая делает приблизительно следующее:
a {
font-family: Arial;
font-style: italic;
font-size: 14px;
line-height: 18px;
font-weight: bold;
}
=>
a {
font: italic 700 14px/18px Arial;
}
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-babel, который конвертирует ES6/ES7 в ES5.
grunt-jsfmt — полезнейший плагин для работы с JavaScript от команды Rdio, который позволяет искать конкретные фрагменты, форматировать и производить массовые изменения в коде. Также существует grunt-jsbeautifier.
grunt-jscs — JavaScript Code Style. Замечательный инструмент со множеством конфигураций для проверки вашего кода в соответствии с существующими стайлгайдами от jQuery, Яндекса, Google, Airbnb и других.
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 файлов.
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-rev — полезный плагин для работы с ревизиями.
grunt-release и grunt-version — позволяют управлять версиями проекта.
grunt-conventional-changelog — генерирует список изменений на основе коммитов в Git. А есть еще grunt-bump, который следит таким же образом следит за репозиторием и обновляет package.json и grunt-dev-update для обновления самих пакетов.
grunt-wiredep — подключает все необходимые Bower компоненты.
grunt-remove-logging — автоматически удаляет логи.
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-contrib-compress — архивирует папки и файлы.
grunt-contrib-clean и grunt-contrib-copy — соответственно очищают и копируют указанные исходники.
grunt-usebanner — добавляет баннеры (копирайт или ASCII заголовки) в исходных файлах и grunt-figlet для помощи работы с этим.
grunt-file-info — отображает размеры и версии файлов в удобном для чтения виде.
Компиляторы
grunt-contrib-less — LESS в CSS.
grunt-contrib-sass и grunt-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.
matchdep — помогает правильно описать зависимости.
