Для танкиста: зачем сборщики проектов (gulp/webpack)?

Question

[Andrey Chursin]

gulp / grunt / webpack подключают файлы js/css внешних плагинов и оптимизируют их работу с js/css проекта (грубо говоря). Но что за проект должен быть, что бы подключение минимальных jquery/vuejs/bootstrap требовало такой кропотливой настройки сборщика?? И зачем сборщики при использовании cms (сжатие, минификация, оптимизация уже есть в cms)

Comments

[sim3x]

О какой кропотливой настройке идет речь?

В каких цмс есть сжатие и минификация картинок?
Какое отношение данные функции имеют к шаблонам?

[Сергей delphinpro]

Gulp - это таск-раннер. Пишете ему задачу, запускаете, она выполняется. Можно выполнять несколько задач одной командой, последовательно, параллельно, как угодно.
Возможности подключением и оптимизацией не ограничиваются.
Задача - это javascript функция, выполняемая в среде nodejs. Значит вы можете написать вообще любую задачу, какая только придет в голову и которую можно выполнить программно.
Скачать библиотеки, собрать файлы статики, оптимизировать их, прогнать тесты, запушить на гитхаб, отправить готовую сборку по ftp на свой сервер и потом выключить компьютер. Ах да, если к компу подключить кофеварку, можно еще и ей дать команду сварить кофе.

Answer 1

[McHack]

Представьте такую ситуацию. У вас огромный проект с множеством составляющих, над ним работает 4-6 человек и у каждого собственные js и css к примеру, плюс ко всему вы работает с GIT-ом (а сейчас без него никуда). В девелоперской сборке творится корпоративный бардак, куча файлов, куча несжатых картинок и css-файлы на 8К+ строк.

Собственно, тут нам и понадобится сборщик, который соединит воедино все .css, .scss, .styl в один единый минифицированный css-файл. Тоже самое сделает и со скриптами, пожмет картинки и положит их в положенную папку. Вы на выходе имеете довольно оптимизированный и хорошо потерявший в весе проект. Отсюда вы грузите нужное вам на нужную ветку вашего Git-а и отправляется оттуда на сервер. В итоге на сервере вы имеете готовый продукт, без бардака и конечный пользователь не получает ничего лишнего.

Это самый базовый пример и более глобальная цель сборщиков и им подобного. Если же отходить от банальщины, то разработчику просто намного удобнее и приятнее работать. Если же вы не понимаете зачем это все нужно, значит вы просто еще не "доросли" до этого. Рано или поздно и вы придете в эту тему, тогда то и раскроете рот от всех возможностей, которые имеются в том же WebPack :D

Answer 2

[geektimer]

По крайней мере, из очевидного, с помощью Gulp например можно при разработке автоматически минифицировать изображения + свои исходники, чтобы уменьшить вес. Еще подключить live reload, который будет сразу же отображать все изменения в браузере без необходимости перезагружать страничку каждый раз. Так же SASS и многое другое.