How to auto-include plugins and libraries in a front-end project?

Question

npm

I use Gulp as a task manager to build my projects, Sublime Text 3 text editor and NPM to download and update packages like Bootstrap. Every time I have to include various libraries in my project, I always do everything manually - I copy the necessary library files to the lib folder of my project and write the paths to the js and css files of the library in my html.
The question is, is it possible to somehow automate all this, organize pull-ups from node_modules?
Imagine an example, it would be cool to write "bootstrap3.3.1"/"bootstrap" in the gulpfile and after that the gulp itself pulls all the files where necessary and edits the html, or, for example, write in the CLI with the same result. I'm interested in any plugins or implementations of the like.

Answer 1

In general, the answer has long been invented. These are project builders. For completely complete automation, that is, they wrote "import 'bootstrap'" in the project and it connected itself - parcel , otherwise webpack will be more than enough . How it works? There are detailed configuration guides in the documentation and on YouTube, in fact, the project assembler turns your entire huge project decomposed into logical modules into one file - bundle.js (classic name). Further, this file is connected to index.html and voila - a fully working project in one file with styles and logic. Also don't forget about package managers - npm or yarn, they provide convenient commands for automatically installing/updating all the necessary packages, which you can later import into the project from the node_modules folder where they are installed. Everything is saved in package.json, which usually contains information about the project.

Answer 2

npm i bootstrap --save
And then just write import 'bootstrap/dist/css/bootstrap.css' in main.js