Gulpfile — Gulp

Throughout this course, we'll be working with the gulpfile.js file. Remember the project structure:

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

Note that the file is in the layout-project/ directory, not src/. These things are very important because the location of the file affects how we'll specify paths. If you see that the build isn't going well, or that something is going wrong, first check the location of the gulpfile.js file and the paths that are written there. You may encounter this problem if you've copied a file from another project.

The entire gulpfile.js file can be roughly divided into three parts:

• Connecting the necessary components for operation
• Functions-tasks that define operations
• Exporting tasks by default

We don't need to emphasize this because these operations don't go in any other order :)

It's worth noting that: this course will use JavaScript code. If you haven't studied this language, take the Introduction to Programming course before continuing. This course will teach you the basic basics of the language, learn functions, connect packages, and export functions. All of this will be used in Gulp

Let's create our first task in Gulp:

const firstTask = (done) => {
  console.log('My First Hexlet Task');

  done();
};

exports.default = firstTask;

What's going on here? The main information is contained in the firstTask function. This is the task that Gulp will be able to perform. It's important to pay attention to the passed done argument. We don't need to go into where it comes from and what lies inside. The important thing for us is that it is a function that's called at the end of a task in order to indicate that it's over.

The name of the task is up to you. There are no restrictions, but try to name tasks clearly. If you're working with CSS in a task, you don't need to call the task WindowsOmegaTask. You can read more about naming in our blog:

• Perfect Code: Naming in Programming
• Perfect Code: Naming Mistakes in Programming I

Within the task, you can perform various actions, not all of which need to be related to transformation. These can also be simply informative tasks, as in the example above. In this task, we only have the output of console.log(). The lack of restrictions allows you to break up large functions and make the code easy to read.

For Gulp to be able to run a task, it needs to be exported:

exports.default = firstTask;

In this example, the export is named default. And this is indeed the default task that Gulp performs if you run the gulp command in the project directory.

When performing a task, Gulp shows not only the result of the task, but also additional information:

• The gulpfile.js file from which the task is run
• The name of the task to be performed. In this example, it's default
• Task completion time

Exporting tasks

We don't need to only use the default task. You can any task names, and even export different tasks with different names. Let's refine the example a bit and look at calling certain tasks:

const { parallel } = require('gulp');

const sassCompile = (done) => {
  console.log('Compile SASS to CSS');

  done();
};

const pugCompile = (done) => {
  console.log('Compile Pug to HTML');

  done();
};

const imagesOptimize = (done) => {
  console.log('Optimize Images');

  done();
};

exports.default = parallel(sassCompile, pugCompile, imagesOptimize);
exports.layoutCompile = parallel(sassCompile, pugCompile);
exports.assetsOptimize = imagesOptimize;

A few new things were added in this example. Let's take a closer look at them

const { parallel } = require('gulp');

This is where the parallel() function from the Gulp package is plugged in. This function allows you to combine several functions into one task. It's the parallel()function that gets used when exporting tasks in this example.

exports.default = parallel(sassCompile, pugCompile, imagesOptimize);
exports.layoutCompile = parallel(sassCompile, pugCompile);
exports.assetsOptimize = imagesOptimize;

This example exports three tasks:

• default is a default task that performs three functions: sassCompile(), pugCompile() and imagesOptimize(). To start the task, simply run gulp

• layoutCompile is a task that only calls functions related to the compilation of layout files. The gulp layoutCompile command is used to run the task

• assetsOptimize is the task that calls the imagesOptimize() function. The gulp assetsOptimize command is used to start the task

Do it yourself

Create three functions and export them using the parallel() function. Create several different exports and practice calling tasks using the console

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

The Hexlet support team or other students will answer you.