Как организовать автоподключение плагинов и библиотек во фронтэнд проект?

Question

[Никита]

Использую Gulp в качестве таск-менеджера для сборки своих проектов, текстовый редактор Sublime Text 3 и NPM для скачивания и обновления пакетов, например таких как Bootstrap. Каждый раз когда мне приходится подключать различные библиотеки в мой проект то всегда делаю все в ручную - копирую необходимые файлы библиотеки в папку lib моего проекта и прописываю в моем html пути до js и css файлов библиотеки.

Вопрос такой, возможно ли все это как-то автоматизировать, организовать подтягивание из node_modules?
Представим пример, круто было бы написать в gulpfile "bootstrap3.3.1"/"bootstrap" и после этого галп сам подтягивает все файлы куда нужно и правит html, ну или к примеру написать в CLI с тем же результатом. Меня интересуют любые плагины или реализации подобного.

Answer 1

[Михаил Власов]

В общем-то ответ уже давно изобретен. Это сборщики проектов. Для совсем полной автоматизации, то есть прописали в проекте "import 'bootstrap'" и он сам подключился - parcel, в остальном будет более чем достаточно webpack. Как это работает? В документации и на ютубе есть подробные гайды по настройке, по сути сборщик проектов превращает весь ваш огромный декомпозированный на логические модули проект в один файл - bundle.js (классическое название). Далее этот файл подключается в index.html и вуаля – полностью рабочий проект в одном файле со стилями и логикой. Также не забывайте о пакетных менеджерах – npm или yarn, они предоставляют удобные команды для автоматической установки/обновления всех нужных пакетов, которые вы можете в последствии импортировать в проект из папки node_modules, куда они устанавливаются. Сохраняется все в package.json, там же обычно и содержится информация о проекте.

Answer 2

[grinat]

npm i bootstrap --save
И затем просто пишешь import 'bootstrap/dist/css/bootstrap.css' в main.js