Webpack и Gulp для Битрикс
Webpack
и Gulp
— популярные сборщики модулей на JavaScript. Каждый инструмент имеет свои преимущества и недостатки. Возникает вопрос, какой сборщик лучше использовать.
Эти инструменты выполняют разные функции, хотя многие думают что это одно и тоже. Вы можете использовать в одном проекте два иструмента одновременно, главное делать это корректно. В первую очередь нужно определиться с тем, какую задачу вам нужно решить.
Для наглядности приведу пример из жизни. Нужно забить гвоздь, это можно сделать любым подручным средством, но лучше взять более правильный инструмент который называется молоток. Так и в JavaScript,инструментов много, но использовать надо подходящий.
Gulp
Готовый код можно скачать в моем репозитории на GitFlic.
Gulp
отвечает за сборку проекта. Есть исходные файлы, которые нужны разработчику для создания проекта, а на выходе нужно получить оптимизированные файлы для пользователя. В Gulp
удобно и быстро работать с препроцессорами, шаблонизаторами, оптимизацией всевозможных ресурсов — разметка, стили, шрифты, скрипты, картинки, иконки. В конечном счёте мы получаем оптимизированную сборку проекта, которую остаётся отправить на сервер.
Webpack
Готовый код можно скачать в моем репозитории на GitFlic.
Webpack
может сделать практически всё, что может Gulp
, но Webpack
лучше всего подходит для работы с JavaScript файлами. После работы над многочисленными JavaScript-файлами проекта Webpack
создаёт билд, один файл со всей функциональностью сайта. Билд можно оптимизировать и разрезать единый файл на чанки, маленькие кусочки билда. Например, если на странице нет модального окна, то билд не будет загружать чанк modal.js
.