Register to get access to free programming courses with interactive exercises

Installation Gulp

In terms of its innards, Gulp is a normal npm package. You have already used similar packages with SASS, Pug, Bootstrap; there are no surprises here. To install Gulp, you need to 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 out the installed version with the gulp --version command. The following versions will be used in this course:

npx gulp --version

CLI version: 2.3.0
Local version: 4.0.2

You may notice that not only gulp itself gets installed, but also a special CLI shell for it, which is why using gulp --version shows the versions of two different packages.


Note that: this course covers Gulp 4, which is shown in the Local version. Make sure that the version of Gulp after installation is at least version 4. If you're using version 3, some of the examples in this course may work incorrectly or not at all


Project file organization

Throughout the course, we'll be working with a layout "project". Modifying and compiling files, etc. For this, it's worth creating a project starting with the file structure, i.e., the location and naming of directories and files.

There are no strict standards for what a particular directory should be called. Gulp also doesn't give rules on this, but there are well-established norms. One of them is to divide the project into a development version and a website version. The development version is often called src, and the finished version is build. These are the directories that will be contained in the project.

We won't touch the build directory directly, because files and directories will automatically appear there after they're processed by the Gulp task manager.

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

New files and directories will be added 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 practice, you can create your own 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. This 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.


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
130
courses
1000
exercises
2000+
hours of theory
3200
tests

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: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
Layout Designer icon
Profession
Under development beginner
Layout with the latest CSS standards
start anytime 5 months

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.