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:

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.

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