Что лучше gulp или webpack
Gulp vs Webpack
Всем привет, дорогие друзья! И снова в профессиональном сообществе не утихают споры, относительно того, какой инструмент использовать в работе. Сегодня речь пойдет о таких инструментах, как Gulp и Webpack. Мы, наконец-то, поставим точку в этом вопросе и, я надеюсь, больше не будем к нему возвращаться.
Сегодня я хотел бы показать вам, дорогие друзья, насколько это глупый и бестолковый спор по определению и сделать вывод по данной теме.
Не стоит забывать, что мир веб-разработки не делится на черное и белое. Кроме области дизайна и области программирования в сферическом вакууме, есть и другие области. Это, в первую очередь, разработка коммерческих проектов на CMS, заказная разработка, конвейерная разработка, огромный пласт индустрии, не нуждающийся в Вебпаке, как первостепенном инструменте, ведь здесь не идет речи о создании приложений. Окромя компаний, которые занимаются созданием SPA, работающие в команде над одним единственным проектом, есть и другие области, другие рынки. И начинающие разработчики, дизайнеры, начитавшись отзывов, насмотревшись на тренды, формируют неправильное понимание рынка инструментов, начинают использовать не то, что им нужно, боясь быть не актуальными, не современными. И это ловушка. Они видят популярность инструмента, абсолютно не понимая природы такой популярности и области применения. Будьте рациональны, дорогие друзья.
Какую систему сборки FroneEnd’a выбрать? Grunt, gulp или webpack?
В общем-то, webpack немного в другой весовой категории, grunt/gulp инструменты более широкого назначения. Но! webpack покрывает, наверное, 90% задач, обычно возлагаемых на таск-раннеры. 7.5 оставшегося покрывают npm-скрипты, ну а 2.5 — сложные кейсы, где без раннера уж никак:)
grunt все еще вполне рабочий инструмент, и, по моему мнению, его конфиги куда более читаемы, чем у gulp, но реальность такова, что по работе вы скорее всего столкнетесь с проектом на gulp или вообще на одном webpack.
Webpack сейчас встречается довольно часто, так что какой-то конфиг собрать нужно, но с другой стороны сильно париться по этому поводу нет смысла. В основном, главное, чтобы проект работал. Есть готовые конфиги и бойлерплейты и нет ничего плохого в том, чтобы ими пользоваться.
Gulp vs Grunt — Gulp вроде очевидный выбор будет, хотя grunt также используется. А что касается актуальности, то известные front-end разработчики рекомендуют переходить на npm скрипты.
В общем-то, если работа не диктует стек технологий сейчас, то выбор за Вами. Что больше нравится, то и берите.
Webpack vs Gulp, внятно и понятно. Или для чего мне еще один мощный инструмент?
нужно ли мне использовать webpack с gulp или вовсе, только webpack
Есть конечно «плагины» для webpack добавляющие функциональность таск раннеров но как по мне это уже перебор.
имхо очередное хипстерское (nodejs) веяние.
Каждый год, стабильно, весь мир «внезапно» осознает что их текущий инструмент (выпущенный год назад) стал слишком «фу фу фу», и нужно срочно запилить что-то новое, чтобы все сказали «ах».
Подождем пока лет 5, пока всё это устаканится, и сформируется нормальный стек технологий для разработки.
Вячеслав Лебедев:
>Факты убедительнее для того, чтобы самому решить, стоит ли он времени на изучение.
Какие факты? Что это очередная поделка, от тех кто мыслит как на картинке ниже?
Я пользуюсь gulp. В свое время стоял выбор между gulp и grunt, мне по духу больше пришелся gulp.
Менять его на что-то новое. зачем? Он полностью устраивает по своему функционалу.
А менять инструмент только ради моды. ну вам виднее.
D’ Normalization: я тоже был примерно такого же мнения, webpack смотрится слегка противоестественно. Но по итогу я решил попробовать и пока доволен, так как он решил целую гору моих проблем со сборкой проектов.
А для простого сайтика я бы webpack не брал конечно. Хотя сайтики разные бывают.
Вячеслав Лебедев: решает конечно, у меня все проекты на ES6 за последние пол года (чуть меньше пожалуй).
Пока спасало только то что в ангуляре есть свои модули, но иногда всеравно случаются косяки связанные с ресовом зависимостей и т.д.
Так же щаблоны. С gulp я собирал шаблоны в templateCache и не парился, с webpack я тупо импортирую их внутрь компонентов (шаблоны только для них) и далее с ними орудую. А так как я еще и jade использую то это все просто дико удобно.
webpack выдерет из core-js только те полифилы которые реально мне нужны (так как я явно прописал зависимость от оных). Это как бы и с другими бандлерами работает, тут просто преимущество бандлеров над тупой конкатенацией. С gulp (имею в виду без бандлинга) же мне пришлось бы подключать весь core-js или лепить кастыли.
Gulp + Webpack или ПРОСТО Webpack?
Если вы не хотите глотать, да, есть хрюканье, но вы также можете просто указать команды в вашем package.json и вызывать их из командной строки без запуска задач, чтобы просто начать работу. Например:
. и вот пример использования веб-пакета из задачи gulp. Это делает еще один шаг и предполагает, что ваша конфигурация webpack написана на es6.
Сценарии NPM могут делать то же самое, что и gulp, но примерно в 50 раз меньше кода. Фактически, без кода, только аргументы командной строки.
Например, описанный вами вариант использования, в котором вы хотите иметь разный код для разных сред.
С Webpack + NPM Scripts это так просто:
Из-за крутости сценариев NPM он позволяет легко создавать цепочки, подобно тому, как gulp использует Streams / pipe.
Попробуйте сделать то же самое с глотком. Вам придется подождать, пока кто-нибудь придет и напишет gulp-wrapper для нативной программы, которую вы хотите использовать. Кроме того, вам, вероятно, понадобится написать сложный код, подобный следующему: (взят прямо из репозитория angular2-seed )
Код разработки Gulp
Код производства Gulp
Фактический код залпа гораздо сложнее, поскольку это только 2 из нескольких десятков файлов залога в репо.
Итак, какой из них вам легче?
По моему мнению, сценарии NPM намного превосходят по эффективности и простоте использования, и все разработчики должны подумать об их использовании в своем рабочем процессе, поскольку это значительно экономит время.
ОБНОВИТЬ
Я столкнулся с одним сценарием, в котором я хотел использовать Gulp в сочетании со скриптами NPM и Webpack.
Когда мне нужно выполнить удаленную отладку, например, на устройстве iPad или Android, мне нужно запустить дополнительные серверы. В прошлом я запускал все серверы как отдельные процессы из IntelliJ IDEA (или Webstorm), что легко с «сложной» конфигурацией выполнения. Но если мне нужно остановить и перезапустить их, было утомительно закрывать 5 разных вкладок сервера, плюс вывод распределялся по разным окнам.
Одним из преимуществ gulp является то, что он может объединять весь вывод отдельных независимых процессов в одно консольное окно, которое становится родительским для всех дочерних серверов.
Поэтому я создал очень простую задачу gulp, которая просто запускает мои сценарии NPM или команды напрямую, поэтому весь вывод отображается в одном окне, и я могу легко завершить все 5 серверов одновременно, закрыв окно задачи gulp.
Поэтому я в основном использую сценарии NPM для всех своих задач, но иногда, когда мне нужно запустить сразу несколько серверов, я запускаю задачу Gulp, чтобы помочь. Выберите правильный инструмент для правильной работы.
ОБНОВЛЕНИЕ 2
Теперь я использую скрипт, который вызывается одновременно, который выполняет ту же функцию, что и описанная выше задача gulp. Он запускает несколько сценариев CLI параллельно и направляет их все в одно и то же окно консоли, и его очень просто использовать. Еще раз, код не требуется (ну, код находится внутри node_module для одновременного использования, но вам не нужно беспокоиться об этом)
При этом все 5 скриптов запускаются параллельно по одному терминалу. Потрясающие! Так что в этом пункте я редко использую gulp, поскольку существует так много сценариев cli для выполнения одних и тех же задач без кода.
Я предлагаю вам прочитать эти статьи, которые сравнивают их в глубине.