For the tanker: why project builders (gulp/webpack)?

Question

Layout

gulp / grunt / webpack include js/css files of external plugins and optimize their work with js/css of the project (roughly speaking). But what kind of project should be that the inclusion of minimal jquery / vuejs / bootstrap would require such painstaking configuration of the collector?? And why are there collectors when using cms (compression, minification, optimization are already in cms)

Answer 1

Imagine such a situation. You have a huge project with many components, 4-6 people are working on it, and everyone has their own js and css, for example, plus you work with GIT (and now you can’t do without it). In the development assembly, a corporate mess is going on, a bunch of files, a bunch of uncompressed pictures and css files for 8K+ lines.
Actually, here we need a collector that will combine all .css, .scss, .styl into one single minified css file. It will do the same with scripts, it will reap the pictures and put them in the appropriate folder. You end up with a fairly optimized and well-weighted project. From here you upload what you need to the desired branch of your Git and send it to the server from there. As a result, you have a finished product on the server, without a mess, and the end user does not receive anything extra.
This is the most basic example and the more general purpose of assemblers and the like. If we move away from the banal, then the developer is simply much more convenient and pleasant to work with. If you do not understand why all this is needed, then you simply have not yet "grown up" to this. Sooner or later you will come to this topic, then you will open your mouth from all the possibilities that are available in the same WebPack: D

Answer 2

At least from the obvious, with the help of Gulp, for example, you can automatically minify images + your sources during development to reduce weight. Also connect live reload, which will immediately display all changes in the browser without having to reload the page every time. Also SASS and much more.