Самые нужные плагины для Grunt



    Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

    У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется 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 — помогает правильно описать зависимости.
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну, и что?
    Реклама
    Комментарии 43
    • +1
      Спасибо за подборку! Еще бы для Gulp аналогичный список. Хотя большинство можно найти просто заменив grunt- на gulp- :)
      • +2
        Пожалуйста! Да, я сегодня или завтра опубликую. Но там почти все одинаковое.
        • 0
          А что лучше grunt или gulp? :)
            • +1
              Прочитал, так и не осознал, какие преимущества у гранта. «PHP-разработчики не поймут gulp», глупый аргумент.
              • +2
                Использую gulp для сборки PHP проектов (как замена медленному и уродливому phing).

                Вообще gulp в плане модели работы и философии получше grunt-а. Я вообще не вижу смысла сегодня использовать последний. Gulp4 обещает быть еще лучше.
                • 0
                  как замена медленному и уродливому phing


                  О, это отличная идея, phing и правда уродец. Не поделишься рецептами?
                  • 0
                    А какие там рецепты то? Запусть composer, тесты, собрать deb пакет (или если вы деплоитесь в духе капистрано то tar.gz архив), может еще прогнать через код снифер и все… Дальше зависит от нюансов ваших процессов.
            • 0
              Полгода назад перешел на Галп, обратно возвращаться не собираюсь. Доволен в полной мере сборкой фронта, и скоростью и удобством. Да и редактирование тасков в Галп намного удобнее с его nodejs-way, чем json в Гранте.
              • +1
                >> А что лучше grunt или gulp? :)
                Gulp. Хотя бы только потому, что задачи в нем короче и интуитивней.
                • 0
                  Вы сейчас спросили как в Теории большого взрыва — «А кто из супергероев лучше ?»
            • +1
              Лучше бы этот список оформить в виде таблицы с колонками «Grunt» и «Gulp». Это было бы полезно с учетом того, что для некоторых задач для gulp не нужны плагины.

              Странно, что нет плагинов для конвертации es6 в es5, например, grunt-babel.
              • –2
                Странно, как вы читали. Автополифилер есть для этого.
                • 0
                  Autopolyfiller это не совсем то. Он разве сможет es6-классы сконвертить в es5?
                • 0
                  del
                  • 0
                    А почему не grunt-traceur или grunt-es6-transpiler (для gulp тоже есть).
                    • 0
                      Я 6to5 aka Babel только в качестве примера привел.
                      • 0
                        Потому что traceur медленный + рантайм за собой тащит, и в babel самая полная поддержка es6/7 фич.
                        • 0
                          babel же тоже тащит за собой рантайм, нет? В целом интересно, посмотрю.
                          • 0
                            Ровно там, где это нужно. Для базовых операций — совсем немного, для генераторов — regenerator, для async/await тоже что-то фейсбуковое. Также можно babel/polyfill подключить, который алиас на core-js. В общем рантайм можно контролировать и подключать ровно то, что надо.
                            А еще недавно в babel добавили оптимизацию хвостовой рекурсии, на пример.
                            • 0
                              Рантайм babel условно микроскопический, и нужен только для небольшого набора фич. Остальное — нативненько и понятно. Traceur использует свой рантайм практически во всем (могу ошибаться в текущем положении дел, давно не работал с traceur).
                      • 0
                        Для подмены статики с боевой, пути к которой прописаны в шаблоне, на результаты динамической генерации доступные на локалхосте удобно использовать proxy модули
                        www.npmjs.com/package/grunt-proxy
                        github.com/drewzboto/grunt-connect-proxy
                        Раньше использовали Charles для этого. Если у человека настроен локальный сервер, например, nginx, то можно и в нем настроить, например, example.dev у меня, как раз всю статику будет забирает с сервера поднятого грантом, а example.test уже отдает сайт без подмены статики, выдывая сгенерированную продакшен версию ресурсов, но использование модуля дает большую переносимость все же.

                        Для деплоя, раньше использовали capistrano, git-хуки, после статьи для простых сценариев перешли на grunt-shipit

                        В простых случаях используем grunt-rigger для конкатенации js, в отличие от других модулей, хотелось прописывать все в самом файле
                        //= partials/some.partial.js
                        Видимо сказывался опыт работы с rails, и не хотелось лезть каждый раз в файл настроек сборщика или в хтмл пихать кучу тегов скрипт, которые будет парсить сборщик и заменять потом одним. В статье gulp-версию плагина используют не тольк для js, но у нас такой надобности не было, обычно у шаблонизаторов свои методы для вставки партиалов, у css-препроцессоров тоже.
                        • 0
                          Что-то не помню, чтобы у какого-либо минификатора из benchmark'а была фича long-hand -> short-hand, на ум приходит только github.com/frankmarineau/shorthand, у которой нет ни grunt, ни gulp таска :(
                          • 0
                            Собираюсь обновить пост и репу, внимательно изучаю комменты. Это именно то, что я потерял! Спасибо!
                          • +2
                            По моему развеяли же все мифы о grunt-revizor?
                            • 0
                              Всмысле?
                              • +2
                                Если коротко — после gzip разница незначительна, 3%
                                + непонятно что делать с динамически добавляемыми классами
                                • 0
                                  Скоро я развею ваши мифы про 3Кб, как только появится свободный денек, в связи с переездом в Москву, времени просто нету, но я обязательно его найду.

                                  По поводу самого плагина, к сожалению или к счастью он не имеет отношение к маил.ру, видимо такое впечатление сложилось из-за того, что замеры я делал на их css файле, поэтому не совсем корректно указывать их.
                                  • +1
                                    Будет здорово! Хорошо когда так вот ошибаешься) Но я в лоб сделал замер — получил такой результат.
                            • +2
                              Но недавно я видел оптимизатор [CSS], который выполняет приблизительно следующее…

                              То, что вы описываете, называется структурной оптимизацией и это умеют делать csso Яндекса и cssshrink Стояна Стефанова — но они оба не то, чтобы активно поддерживаются и имеют явные проблемы, см. ишьи в проектах. Поэтому лично я попробовал всё это, плюнул на структурную оптимизацию и вполне доволен результатами cssmin.
                              • +7
                                В целом, ваша восторженная подборка сотни плагинов достаточно бесполезная. Каждый из них решает свою задачу и редко когда используется больше, чем десяток одновременно. Этот пост с рекомендациями прекрасно заменяется поиском по ключевому слову на странице gruntjs.com/plugins с сортировкой по количеству загрузок. Лучше бы вы описали как вы решили конкретные задачи, вместо ненужного коллекционирования «плюшек».
                                • –2
                                  Не согласен. И говорю это не как автор защищающий материал, а как читалель. Тот же бесценный grunt-email-design для верстки писем, когда я о нем услышал, я и не догадывался, что такое есть. Неужели мне стоило постоянно заходить на поиск и прописываться email дабы увидеть нечто подобное. И таких примеров масса.

                                  И опять же далеко не все верстальщики или не матерые фронтендеры работают с CL и знают о возможностях Grunt/Gulp.
                                  • –1
                                    И опять же далеко не все верстальщики или не матерые фронтендеры работают с CL и знают о возможностях Grunt/Gulp.

                                    А зря…
                              • 0
                                Перебераю все комменты дабы обновить пост, скинули shrthnd. Это как раз то, что я потерял. И структурную оптимизацию как здесь не делает ни CSSO, ни CSSShrink. background, font они так не комбинируют.
                              • +1
                                На мой взгляд откровенно слабая подборка.

                                От себя:

                                load-grunt-config — Как вообще без него?
                                grunt-csso
                                grunt-babel — Бывший 6to5
                                jit-grunt — Использовать вместе с load-grunt-config
                                time-grunt — Время выполнения тасков
                                grunt-polyfill-service — В отличии от grunt-autopolyfiller использует более качественную базу полифилов
                                grunt-image-embed (Если не используется Stylus)
                                grunt-dev-update
                                grunt-sass — В отличии от grunt-contrib-sass использует высокопроизводительный libsass
                                grunt-hapi — Втрой по популярности node.js сервер после express
                                grunt-md5sum — Генерирует удобыный файл для сисадминов (сверяет хеши файлов, которые приехали на сервер)
                                grunt-release
                                grunt-version
                                grunt-usebanner
                                grunt-figlet — Удобно использовать вместе с grunt-usebanner
                                • 0
                                  Некоторые вещи из этого уже есть в подборке. А в чем разница между grunt-release и grunt-version? И для чего нужен grunt-usebanner?
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • +1
                                    Почему все ссылки на гитхаб, а не на npmjs? У последнего видны количество закачек, зависимости и есть ссылка на репозиторий.
                                    Подборка ведь для людей, которые будут использовать, а не допиливать ;)
                                    • 0
                                      Как-то вместо html-build намного круче вот этот github.com/alanshaw/grunt-include-replace. Проще, удобнее.
                                      • 0
                                        Не говоря о эстетических моментах, html-build лучше подходит для инкрементной сборки. Хотя мне больше нравится вариант с inject + jade.
                                      • 0
                                        К инструментам можно ещё добавить grunt-jscpd штука для поиска дубликатов в коде
                                        • –1
                                          I guess, that one is really grate for SPA www.npmjs.com/package/grunt-durandal

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое