0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>Internally, Gulp is a standard npm package. You have used similar packages with SASS, Pug, and Bootstrap; there are no surprises here. To install Gulp, you should have NodeJS and the<strong>npm</strong>package manager installed.</p>
1
<p>Internally, Gulp is a standard npm package. You have used similar packages with SASS, Pug, and Bootstrap; there are no surprises here. To install Gulp, you should have NodeJS and the<strong>npm</strong>package manager installed.</p>
2
<p>If you haven't already encountered it, go to the<a>JS: Setup environment</a>course.</p>
2
<p>If you haven't already encountered it, go to the<a>JS: Setup environment</a>course.</p>
3
<p>We'll use two commands to install Gulp:</p>
3
<p>We'll use two commands to install Gulp:</p>
4
<p>In this course, we'll use the gulp-cli package because it provides a set of commands for working inside the terminal. You can find the installed version with the gulp --version command.</p>
4
<p>In this course, we'll use the gulp-cli package because it provides a set of commands for working inside the terminal. You can find the installed version with the gulp --version command.</p>
5
<p>We will use the following versions in this course:</p>
5
<p>We will use the following versions in this course:</p>
6
<p>You may notice that we install Gulp and also a specific CLI shell for Gulp. It is why using gulp --version shows the versions of two different packages.</p>
6
<p>You may notice that we install Gulp and also a specific CLI shell for Gulp. It is why using gulp --version shows the versions of two different packages.</p>
7
<p>This course covers Gulp 4 in the Local version. Ensure you are running Gulp version 4 or later after installation. If you're using version 3, some examples in this course may work incorrectly.</p>
7
<p>This course covers Gulp 4 in the Local version. Ensure you are running Gulp version 4 or later after installation. If you're using version 3, some examples in this course may work incorrectly.</p>
8
<h2>Project file organization</h2>
8
<h2>Project file organization</h2>
9
<p>We will use a layout called<em>project</em>throughout the course, modifying and compiling files. For this, it is worth creating a project starting with the file structure, the location, and the naming of directories and files.</p>
9
<p>We will use a layout called<em>project</em>throughout the course, modifying and compiling files. For this, it is worth creating a project starting with the file structure, the location, and the naming of directories and files.</p>
10
<p>There are no strict standards for what we should call a particular directory. Gulp also doesn't give rules on naming, but there are established norms. For example, we should divide the project into two versions: one for development and another - for the web. The development version is often called<em>src</em>, and the finished version is<em>build</em>. These directories will be in the project.</p>
10
<p>There are no strict standards for what we should call a particular directory. Gulp also doesn't give rules on naming, but there are established norms. For example, we should divide the project into two versions: one for development and another - for the web. The development version is often called<em>src</em>, and the finished version is<em>build</em>. These directories will be in the project.</p>
11
<p>We won't touch the<em>build</em>directory. Files and directories automatically appear there once the Gulp task manager processes them:</p>
11
<p>We won't touch the<em>build</em>directory. Files and directories automatically appear there once the Gulp task manager processes them:</p>
12
<p>layout-project/ ├── build/ ├── src/ │ ├── sass/ │ │ └── app.scss │ ├── pages/ │ │ ├── index.pug │ │ ├── sections/ │ │ │ ├── head.pug │ │ │ └── footer.pug ├── gulpfile.js ├── package.json └── node_modules/</p>
12
<p>layout-project/ ├── build/ ├── src/ │ ├── sass/ │ │ └── app.scss │ ├── pages/ │ │ ├── index.pug │ │ ├── sections/ │ │ │ ├── head.pug │ │ │ └── footer.pug ├── gulpfile.js ├── package.json └── node_modules/</p>
13
<p>We will add new files and directories to this project as we learn. By doing this, we'll be able to examine how the Gulp task manager works and learn how to configure it for a specific project, all step by step. As a practice, you can create your structure and change the examples to suit your project. That way, you can delve deeper into how Gulp works.</p>
13
<p>We will add new files and directories to this project as we learn. By doing this, we'll be able to examine how the Gulp task manager works and learn how to configure it for a specific project, all step by step. As a practice, you can create your structure and change the examples to suit your project. That way, you can delve deeper into how Gulp works.</p>
14
<p>Note that the directory contains the file<em>gulpfile.js</em>. It is the central part of our whole course because this is the file in which we'll program our tasks, and this is what the Gulp package we've installed will look for.</p>
14
<p>Note that the directory contains the file<em>gulpfile.js</em>. It is the central part of our whole course because this is the file in which we'll program our tasks, and this is what the Gulp package we've installed will look for.</p>