Why is Gulp/Webpack needed?

Question

Layout

Confused about why Gulp and Webpack are needed. I used to think that Webpack is doing the task of collecting a bunch of files into a small composition for more resource-intensive use.
But when I find a topic on the toaster, what is Gulp, I see this answer: "For example, you have a large number (X pieces) of css or js files that you include on your pages using and tags."
Please explain what both of these tools do in simple terms and how they differ.

Answer 1

These are Taskrunners (task launchers), the purpose of which is to automate a large number of different processes with the help of JavaScript libraries that are performed with project resources during development and sending to production.
For example,
- Compiling preprocessor files into CSS
- Combining a large number of style files into one
- CSS, JS, HTML, SVG minification
- Compressing images
- Creating sprites from separate SVG files
- Optimizing and to some extent "validating" HTML ( for example, put down the alt attribute for all img
- and much more

Answer 2

Webpack is a module builder that allows you to write modular code, where each module has the ability to import different dependencies, ranging from other modules to css styles and images. There is even an example on the main page of the site, you submit "modules with dependencies" as input, and at the output you get something that can work in the browser.
Webpack is just an extreme development of the idea of ​​self-calling functions., with which they tried to solve the problem of pollution of the global scope, when each script connected to the page could freely access any variables and functions from other scripts, which led to various problems, such as accidental redefinition of variables, implicit dependencies and the need for a strict sequence of connecting scripts. This idea then evolved into requirejs, then browserify, and now webpack/rollup/parcel. Webpack parses the dependencies you include in your code and assembles them into a final bundle that can run in the browser.
Gulp is a task manager for automating various routine operations such as minification, testing, file merging, and the like. Gulp, unlike Webpack, does not parse your code in any way. It does nothing at all and is essentially useless.
Gulp is a set of plugin wrappers for various utilities. This leads to a number of problems - plugins are no longer supported by developers, plugins break with the next major release of Gulp, plugins do not allow you to use a new version of the utility until the plugin developer releases a new version of the plugin that is compatible with the new version of the utility. A tool that originally came into being to help solve emerging problems has turned into a problem itself. This all led to the fact that they began to abandon Gulp in favor of pure utilities that now run scripts via npm. If you look at any popular open-source libraries, such as bootstrap, you can see that Gulp was in version 3, but it was gone in version 4. There is no point in using Gulp today. The Gulp/Grunt idea is dead because the plugin wrapper idea didn't bring anything,

Answer 3

Here and here it is described in sufficient detail.
But in a nutshell:
Gulp - for
Webpack layout - for js applications.
Try both out. Then the questions will disappear.