Introduction to Gulp 4

Gulp is a tool for automating tasks that frequently arise during website development: minimizing CSS and JavaScript files, merging multiple files into one, converting LESS and SASS to CSS, converting the TypeScript language into JavaScript, and similar tasks.

Its operating principle is as follows: tasks are written for the Gulp system, and Gulp executes these tasks in a specified sequence.

Let's install Gulp. To do this, in the command line, you need to run the command:

npm install --global gulp-cli

Now let's create a project where Gulp will be used. To do this, in the project folder, create the following file structure:

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

Also, add a package.json file to the project folder. After that, you can install Gulp into the project. To do this, in the command line, while located in the project folder, you need to run the following command:

npm install --save-dev gulp

Create a project and install Gulp into it.