Как собрать frontend (dev и prod)?

Question

[nepster-web]

Моя история начинается с того, что есть миллионы различных виджетов, плагинов и расширений для фронтенда, проекты требуют красивые и продуманные интерфейсы: кастомные элементы форм, скроллеры, ползунки и еще много чего. Такого добра валом, и 1000 звезд на гитхабе далеко не показатель крутого плагина, так как там может быть очень много багов с меткой типа "Нужна помощь".

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

Поэтому я решил сделать такую себе заготовку из набора качественных виджетов. Имею такую аготовку можно было бы без труда начинать проект и компилить только нужный список.

Я хочу воспользоваться следующими штуковинами:
npm и bower в качестве пакетных менеджеров
grunt для сборки
less
ну и собственно различные плагины и виджеты.

Структура получилась следующая:

bower_components/
build/
node_modules/
src/
bower.json
Gruntfile.js
package.json

src - тут я планирую вести разработку всего своего творения. Тоесть мне нужно правильно настроить Gruntfile.js, чтобы по команде собиралось все это дело. И так уже вышло, что мне нужно 2 версии сборки.

build - а вот сюда уже должен попадать итог всего. Тоесть если в src находится все все все, то в build попадет только то, что нужно для проекта (например 5 определенных плагинов из 10 собранных в 1 файл).

Тоесть в теории хочу прийти к вот такому:
src/ - свалка для разработки, которая демонстрирует все все все .
build/ - содержит widgets.js, widget.css и jquery.js, где widgets.js и widget.css это сборка всех плагинов, которые нас интересуют в нашем новом проекте.

Возникает вопрос:
Все зависимости, которые я указал, попадают в bower_components, теперь мне нужно перетащить в папку src необходимые файлы. А затем как-то используя другие команды собрать только нужные файлы в папку build. Тоесть можно ли как-то в grunt реализовать что то вроде: grunt build dev и grunt build prod ?

Или возможно есть другие способы?

Comments

[Андрей Хохлов]

В чем вопрос то? Да, можно перетащить, да можно собрать. Изучайте грант, в интернете куча примеров.

[Сергей Протько]

А лучше сразу gulp

[nepster-web]

Андрей Хохлов: в том то и дело, что там 100500 подходов. Прокомментируйте вот такой:

copy: {
dev: { },
prod: {}
}

grunt.registerTask('dev', ['copy:dev']);
grunt.registerTask('prod', ['copy:prod']);

Для каждой команды по 2 окружения ?

[nepster-web]

Сергей Протько: смотрел в его сторону, но это вопрос религии, я привык к синтаксису grunt, а gulp не очень понравился. Да и щас технологий как какашек в общественном туалете. Они выходят быстрее чем я успеваю их изучать.

[Андрей Хохлов]

nepster09 Я Gulp использую, у меня на каждый чих отдельная задача и куча условий в конфиге, в зависимости от которых запускаются те или иные задачи и определяются параметры в них самих. + большие задачи типа build, которые содержат в себе маленькие.

[nepster-web]

Андрей Хохлов: а у вас есть примерчик на гите ?

[Сергей Протько]

nepster09: gulp позволяет более логично организовать таски, а с выходом gulp4 вообще сказка будет (сейчас у галпа проблемы со сложными комбинациями паралельных и последовательных запусков тасков).

В частности использование gulp (code over configuration) решает массу проблем с тем как собирается фронт. Обычно там для продакшена просто добавляются отдельные стэпы, или конфиги подсовываются другие или еще чего... это пара строчек js.

Что до вопросов религии - это конечно да, но gulp дает намного больше контроля за тем что происходит и поддерживать инфраструктуру сборки проще.

[Андрей Хохлов]

https://github.com/tars/tars проект от 2gis, мне as is не подошел, но я многое из него взял для своего сборщика

[Андрей Хохлов]

А вот кстати мой старый на Grunt: https://github.com/andrey-hohlov/project-template

[nepster-web]

Сергей Протько: понял, спасибо, тогда наверно покопаю уже 4.
Андрей Хохлов: спасибо, пойду потыкаю.