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
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.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.