Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 43
Спасибо за подборку! Еще бы для Gulp аналогичный список. Хотя большинство можно найти просто заменив grunt- на gulp- :)
Пожалуйста! Да, я сегодня или завтра опубликую. Но там почти все одинаковое.
А что лучше grunt или gulp? :)
Прочитал, так и не осознал, какие преимущества у гранта. «PHP-разработчики не поймут gulp», глупый аргумент.
Использую gulp для сборки PHP проектов (как замена медленному и уродливому phing).
Вообще gulp в плане модели работы и философии получше grunt-а. Я вообще не вижу смысла сегодня использовать последний. Gulp4 обещает быть еще лучше.
Вообще gulp в плане модели работы и философии получше grunt-а. Я вообще не вижу смысла сегодня использовать последний. Gulp4 обещает быть еще лучше.
Полгода назад перешел на Галп, обратно возвращаться не собираюсь. Доволен в полной мере сборкой фронта, и скоростью и удобством. Да и редактирование тасков в Галп намного удобнее с его nodejs-way, чем json в Гранте.
>> А что лучше grunt или gulp? :)
Gulp. Хотя бы только потому, что задачи в нем короче и интуитивней.
Gulp. Хотя бы только потому, что задачи в нем короче и интуитивней.
Вы сейчас спросили как в Теории большого взрыва — «А кто из супергероев лучше ?»
Лучше бы этот список оформить в виде таблицы с колонками «Grunt» и «Gulp». Это было бы полезно с учетом того, что для некоторых задач для gulp не нужны плагины.
Странно, что нет плагинов для конвертации es6 в es5, например, grunt-babel.
Странно, что нет плагинов для конвертации es6 в es5, например, grunt-babel.
Странно, как вы читали. Автополифилер есть для этого.
del
А почему не grunt-traceur или grunt-es6-transpiler (для gulp тоже есть).
Я 6to5 aka Babel только в качестве примера привел.
Потому что traceur медленный + рантайм за собой тащит, и в babel самая полная поддержка es6/7 фич.
babel же тоже тащит за собой рантайм, нет? В целом интересно, посмотрю.
Ровно там, где это нужно. Для базовых операций — совсем немного, для генераторов — regenerator, для async/await тоже что-то фейсбуковое. Также можно babel/polyfill подключить, который алиас на core-js. В общем рантайм можно контролировать и подключать ровно то, что надо.
А еще недавно в babel добавили оптимизацию хвостовой рекурсии, на пример.
А еще недавно в babel добавили оптимизацию хвостовой рекурсии, на пример.
Рантайм babel условно микроскопический, и нужен только для небольшого набора фич. Остальное — нативненько и понятно. Traceur использует свой рантайм практически во всем (могу ошибаться в текущем положении дел, давно не работал с traceur).
Для подмены статики с боевой, пути к которой прописаны в шаблоне, на результаты динамической генерации доступные на локалхосте удобно использовать 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-препроцессоров тоже.
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-препроцессоров тоже.
Что-то не помню, чтобы у какого-либо минификатора из benchmark'а была фича long-hand -> short-hand, на ум приходит только github.com/frankmarineau/shorthand, у которой нет ни grunt, ни gulp таска :(
По моему развеяли же все мифы о grunt-revizor?
Всмысле?
Если коротко — после gzip разница незначительна, 3%
+ непонятно что делать с динамически добавляемыми классами
+ непонятно что делать с динамически добавляемыми классами
Скоро я развею ваши мифы про 3Кб, как только появится свободный денек, в связи с переездом в Москву, времени просто нету, но я обязательно его найду.
По поводу самого плагина, к сожалению или к счастью он не имеет отношение к маил.ру, видимо такое впечатление сложилось из-за того, что замеры я делал на их css файле, поэтому не совсем корректно указывать их.
По поводу самого плагина, к сожалению или к счастью он не имеет отношение к маил.ру, видимо такое впечатление сложилось из-за того, что замеры я делал на их css файле, поэтому не совсем корректно указывать их.
Но недавно я видел оптимизатор [CSS], который выполняет приблизительно следующее…
То, что вы описываете, называется структурной оптимизацией и это умеют делать csso Яндекса и cssshrink Стояна Стефанова — но они оба не то, чтобы активно поддерживаются и имеют явные проблемы, см. ишьи в проектах. Поэтому лично я попробовал всё это, плюнул на структурную оптимизацию и вполне доволен результатами cssmin.
В целом, ваша восторженная подборка сотни плагинов достаточно бесполезная. Каждый из них решает свою задачу и редко когда используется больше, чем десяток одновременно. Этот пост с рекомендациями прекрасно заменяется поиском по ключевому слову на странице gruntjs.com/plugins с сортировкой по количеству загрузок. Лучше бы вы описали как вы решили конкретные задачи, вместо ненужного коллекционирования «плюшек».
Не согласен. И говорю это не как автор защищающий материал, а как читалель. Тот же бесценный grunt-email-design для верстки писем, когда я о нем услышал, я и не догадывался, что такое есть. Неужели мне стоило постоянно заходить на поиск и прописываться email дабы увидеть нечто подобное. И таких примеров масса.
И опять же далеко не все верстальщики или не матерые фронтендеры работают с CL и знают о возможностях Grunt/Gulp.
И опять же далеко не все верстальщики или не матерые фронтендеры работают с CL и знают о возможностях Grunt/Gulp.
Перебераю все комменты дабы обновить пост, скинули shrthnd. Это как раз то, что я потерял. И структурную оптимизацию как здесь не делает ни CSSO, ни CSSShrink. background, font они так не комбинируют.
На мой взгляд откровенно слабая подборка.
От себя:
От себя:
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
Почему все ссылки на гитхаб, а не на npmjs? У последнего видны количество закачек, зависимости и есть ссылка на репозиторий.
Подборка ведь для людей, которые будут использовать, а не допиливать ;)
Подборка ведь для людей, которые будут использовать, а не допиливать ;)
Как-то вместо html-build намного круче вот этот github.com/alanshaw/grunt-include-replace. Проще, удобнее.
К инструментам можно ещё добавить grunt-jscpd штука для поиска дубликатов в коде
I guess, that one is really grate for SPA www.npmjs.com/package/grunt-durandal
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Самые нужные плагины для Grunt