Gulp
2026-02-21 02:56 Diff
https://hexlet.io/courses/gulp/lessons/install/theory_unit

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 npm package manager installed.

If you haven't already encountered it, go to the JS: Setup environment course.

We'll use two commands to install Gulp:

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.

We will use the following versions in this course:

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.

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.

Project file organization

We will use a layout called project 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.

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 src, and the finished version is build. These directories will be in the project.

We won't touch the build directory. Files and directories automatically appear there once the Gulp task manager processes them:

layout-project/ ├── build/ ├── src/ │ ├── sass/ │ │ └── app.scss │ ├── pages/ │ │ ├── index.pug │ │ ├── sections/ │ │ │ ├── head.pug │ │ │ └── footer.pug ├── gulpfile.js ├── package.json └── node_modules/

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.

Note that the directory contains the file gulpfile.js. 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.