Самые нужные плагины для Grunt
- воскресенье, 22 февраля 2015 г. в 02:11:34
http://habrahabr.ru/post/251157/
Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.
У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Grunt. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Grunt найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.
А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.
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) по ним. Но недавно я видел оптимизатор, который выполняет приблизительно следующее:
=>
И также для
grunt-contrib-htmlmin — простой HTML минификатор.
grunt-penthouse и grunt-criticalcss — автоматически находят Critical Path в вашем проекте. Важный момент с точки зрения производительность, о чем подробнее написано тут.
grunt-csscomb — облагораживает структуру ваших CSS. Еще есть grunt-styleguide для генерации стайлгайдов.
grunt-contrib-csslint — CSS линтер.
grunt-html — HTML валидатор на основе валидатора от W3C.
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 — конкатенация файлов.
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 делает тоже самое, но с выборкой по селекторам и записью в
grunt-sharp — самый быстрый модуль для работы с JPEG, PNG, WebP и TIFF изображениями. Плагин умеет изменять размер, ориентацию, фон, альфа-канал и многое другое.
grunt-svgstore — объединяет все подключаемые SVG файлы и записывает их в HTML как
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.
Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.
У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется 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.