Register to get access to free programming courses with interactive exercises

Installation Gulp

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:

npm install gulp
npm install gulp-cli

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:

npx gulp --version

CLI version: 2.3.0
Local version: 4.0.2

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:

├── 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.

Do it yourself

  • Create the layout-project directory for your project
  • Install the Gulp task manager and make sure the version is at least 4.0
  • Create a rough structure for your project. You can make it up yourself or take an example from the tutorial. The main thing is to have separate directories for the development version and the post version of the Gulp task manager

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.