Фронтенд-сборка. Как собрать только нужные файлы?

Question

[gto6120]

Для разных страниц сайта нужно использовать различный набор css/js файлов (собирать в один, минифицировать и сжимать с помощью gzip). Как я понял все это умеет gulp. Но я нигде не видел чтобы показывали как собирать разный набор файлов для разных страниц. НЕ хочется использовать лишние css/js там, где они не нужны. К примеру, если есть страница контактов, хочу на ней иметь итоговый app.js который включает jquery, bootstrap и кастомный contacts.js , но не хочу чтобы в тот же файл попал и front.js, который приличный по размеру и совсем не имеет отношения к странице контактов.

Answer 1

[Dark_Scorpion]

Вам подойдёт Webpack (Скринкаст по нему)
Он позволяет разделять приложения на модули и собирать их в один файл включая стили. Так же он позволяет разделять приложение на чанки, т.е общее для всех страниц попадает в главную сборку, а остальное в дополнительные для каждой страницы отдельно или как настроите.
Так же можно транслировать ES6 в ES5 для корректной работы в браузерах и прочее.

Answer 2

[Roman K]

В этом нет смысла. Клиенту лучше загрузить и закэшировать один большой файл на 500кб, чем по одному разному на каждую страницу. При этом, на некоторых страницах код JS будет пересекаться (jquery, например) и грузиться по 10 раз впустую.

Answer 3

[dhat]

А откуда человек попадет на страницу контактов? С других страниц сайта? Тогда какой смысл в операции?

Comments

[Сергей delphinpro]

из гугла?

[dhat]

Сергей: и что, вы сами лично часто переходите напрямую из гугла на страницу контактов минуя весь остальной сайт?))

[dhat]

Но я не спорю, предмет вопроса интересен, и сам бы послушал ответов знающи людей. Кажется, нужно что-то вроде webpack.

[Сергей delphinpro]

dhat: но речь ведь не только о странице контактов. Это может быть страница каталога со множеством кастомного джаваскрипт

Answer 4

[xmoonlight]

Советую сразу грузить всю рабочую оболочку SPA приложения для всех страниц, а то, что нужно будет по мере запросов страниц с отдельным функционалом - грузить вместе с такими модулями (разметка HTML+JS/CSS+данные JSON).
Это делается через организацию древовидного URI-роутера с зависимостями на клиентской стороне.
В итоге - как раз и получите разделение так, как Вам необходимо: общий (основной для всех) и дополнительные данные (по мере необходимости).
Я написал includeHTML и теперь постепенно развиваю для себя, чтобы было проще управлять модульностью и загрузкой нужных данных без перезагрузки всей страницы целиком.

Answer 5

[gto6120]

Вот почти все посоветовали грузить сразу все клиенту при первом визите. Может с точки зрения пользователей это и правильно, но как же поисковики? За такое сайт будет хуже ранжироваться.