WebDesign Master
Курсы
Gulp vs Webpack
Инструменты

Gulp vs Webpack

Всем привет, дорогие друзья! И снова в профессиональном сообществе не утихают споры, относительно того, какой инструмент использовать в работе. Сегодня речь пойдет о таких инструментах, как Gulp и Webpack. Мы, наконец-то, поставим точку в этом вопросе и, я надеюсь, больше не будем к нему возвращаться.

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Gulp vs Webpack - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Вообще, в последнее время я стал замечать, что набирает обороты какая-то нездоровая идеализация инструментов, в отрыве от целей, задач и конечного результата. Если ты не используешь какой-то определённый инструмент, значит ты не профи. Если используешь, добро пожаловать в клуб, и не важно, что в результате у тебя получается какашка. Такого холиварного бума, далёкого от сути вопроса, не было даже во времена «Photoshop vs Open Source». Складывается впечатление, что инструмент первостепенен, а не сама область, не результирующий продукт и это довольно печально. Наряду со страхом остаться без денег, у современного веб-разработчика из России и СНГ добавилась новая фобия - использовать НЕ трендовый инструмент, в страхе умереть вместе с ним. Вообще, в своих видео я не однократно обращал ваше внимание на то, что если кто-то говорит, что какой-то инструмент или технология умирает - задумайтесь об объективности таких выводов. Ближе к делу.

Итак, Gulp и Webpack. Основы. Давайте начнём с определений. Изначально, эти инструменты позиционируются создателями, как инструменты для решения несколько разных задач. Webpack позиционируется, как мощный комбайн-бандлер, предназначенный для удобной разработки JS Application и одностраничных приложений. Кроме того, он имеет множество полезных дополнений для решения повседневных задач - препроцессоры, картинки и прочее, которые являются лишь бонусами к основе. Gulp - это таск-ранер, упрощающий жизнь, благодаря автоматизации выполнения каких-то рутинных задач. В принципе, на этом можно было бы остановиться, ведь мы поняли из определений, что это разные инструменты и, в общем-то, они предназначены для разных задач, если бы не одно НО. Почему-то эти два инструмента каким-то странным образом попадают на один график в Google Trends и вызывают бурление в профессиональной среде, Webpack начинают использовать даже там, где не стоит задачи разработки приложения, в угоду трендам, а Gulp несправедливо причисляют к списку инструментов на вымирание.

Сегодня я хотел бы показать вам, дорогие друзья, насколько это глупый и бестолковый спор по определению и сделать вывод по данной теме.

Давайте разберем типичный сценарий перехода с Gulp на Webpack и формирования мнения. Начинающий разработчик, поняв мироустройство веб-разработки, как области, стоит перед выбором - уйти в дизайн или углубиться в JS разработку. Я особо акцентирую на этом внимание сейчас, так как это ключевой момент. Допустим, он выбирает JS, так как данная область ему ближе, начинает изучать рынок инструментов и понимает, что для профессиональной глубокой JS-разработки уже есть крутой инструмент, который позволит ему решить массу проблем одним махом. И этот инструмент, справедливо и безоговорочно - Webpack. Стандарт индустрии. Далее у нашего разработчика появляются и другие задачи - работа с изображениями, препроцессинг и так далее, и он начинает грустить и вспоминать старый добрый Gulp. Однако, его печаль продолжается недолго, ведь он узнаёт, что Webpack даёт таки возможность, окромя работы с JS, инструменты для решения поставленных задач. Теперь есть все вопросы закрыты. Новый оппозиционер Gulp и новая боевая единица для холивара окончательно сформировалась, положительный опыт подкреплён. Теперь этот персонаж будет на право и налево пропагандировать, насколько крут его инструмент (а это, к слову, действительно так, инструмент действительно крут для своих задач), охотно ввязываясь в споры на форумах и советовать свой инструмент даже там, где он не нужен. Я сейчас говорю о веб-дизайне и вёрстке. У нас эти понятия принято относить к разным областям, но по сути - это грани одной специализации.

Не стоит забывать, что мир веб-разработки не делится на чёрное и белое. Кроме области дизайна и области программирования в сферическом вакууме, есть и другие области. Это, в первую очередь, разработка коммерческих проектов на CMS, заказная разработка, конвейерная разработка, огромный пласт индустрии, не нуждающийся в Вебпаке, как первостепенном инструменте, ведь здесь не идёт речи о создании приложений. Окромя компаний, которые занимаются созданием SPA, работающие в команде над одним единственным проектом, есть и другие области, другие рынки. И начинающие разработчики, дизайнеры, начитавшись отзывов, насмотревшись на тренды, формируют неправильное понимание рынка инструментов, начинают использовать не то, что им нужно, боясь быть не актуальными, не современными. И это ловушка. Они видят популярность инструмента, абсолютно не понимая природы такой популярности и области применения. Будьте рациональны, дорогие друзья.

Что касается сборок, которые мы используем и будем использовать для вёрстки в наших проектах, начиная с версии OptimizedHTML 5 - это крайне лёгкий набор инструкций для быстрого старта, в базе своей основанный на Gulp. Я и дальше буду использовать Gulp в наших проектах, так как он достаточен и прост для понимания. У меня была черновая версия конфига Webpack, над созданием которой, в своё время, я работал более недели для «быстрого» старта, наподобие OptimizedHTML. Однако, данный проект я не хочу и не буду публиковать на GitHub, так как для решения наших задач он слишком сложен для понимания, избыточен и неуклюж. Если вы занимаетесь JS программированием, скорее всего вы уже знакомы с Webpack и сможете настроить свой стартер, основанный на Webpack для обучения.

Кроме того, стоит заметить, что Gulp я использую по его прямому назначению - с помощью данного инструмента я оптимизирую хранилище изображений, удаляю копии, выполняю компрессию, автоматизирую работу с файлами, архивирование ненужного про дате, работу с документами и их содержимым, программирую бэкап, делаю таски для unix-приложений и прочая автоматизация рутины, включая работу с веб-ресурсами в рабочих проектах.

Поэтому дорогие друзья, если вы хотите моё авторитетное мнение, я рекомендую вам использовать те инструменты, которые вам по душе, использовать их по назначению и работать в своё удовольствие. Это всего лишь инструменты. Я считаю, что у меня есть моральное право делать такие выводы и выражать свою позицию, ведь в области заказной разработки, создания коммерческих проектов, где на первом месте конверсия, дизайн и продажи - я уже не первый год, а точнее, уже 15 лет. У нас есть весьма крутые проекты, крутые заказчики, интересные лонгриды, имиджевые и коммерческие сайты, интернет-магазины, поэтому, как видите, использование или не использование того или иного инструмента не влияет на конечный результат, ваш успех и эффективность.

Все эти годы забавно наблюдать, как периодически выходят новые инструменты, как вызывают массу споров, обсуждений, пророчат смерть другим технологиям. Мнения, основанные на цифрах популярности. Я не очень люблю мейнстрим и уже настолько привык к подобным явлениям, что не обращаю внимание на холивары и не воспринимаю всерьёз позицию фанатиков, чего и вам советую. Если вам не будет хватать функционала того или иного инструмента, у вас не будет стоять вопроса о выборе другого.

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

  • Gulp include на стороне сервера Browsersync + Build
  • OptimizedHTML 5: Важные обновления стартера для JS-разработки
  • Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
  • Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
  • PageSpeed Insights - Оптимизация (обновление)
  • October CMS - Первое знакомство

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODx
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2021 © WebDesign Master