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.

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

The Hexlet support team or other students will answer you.