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 important because the file location affects how we specify paths. If you see that, the build isn't going well. When something is going wrong, first check the gulpfile.js file location and the paths written there. You may encounter this problem when you copy a file from another project.

We can roughly divide the entire gulpfile.js file 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 :)

This course will use JavaScript code. If you haven't studied this language, take the Introduction to Programming course. This course will teach you the language basics, learn functions, connect packages, and export functions. We will use all of this 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? We contain the core information in the firstTask function. It is the task that Gulp will be able to perform.

Let us pay attention to the passed `done' argument. We don't need to worry about where it comes from and what it contains. The important thing for us is that it's a function we call at the end of a task to indicate that it is finished.

The name of the task is up to you. There are no restrictions, but try to name it accurately. If you're working with CSS, 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. We only have the console.log() output in this task. 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, we need to export it:

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 but also additional information:

• The gulpfile.js file from which we run the task
• The name of the task (in this example, it is default)
• The task completion time

Exporting tasks

We don't have to use only default in our naming. You can use any name and export different tasks with different names. Let us refine the example a bit:

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;

We added a few new things in this example. Let us take a closer look at them:

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

Here we can find the parallel() function from the Gulp package. This function allows you to combine several functions into one task.

It is the parallel() function for exporting tasks in this example:

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

This example exports three tasks.

The default task performs three functions:

• sassCompile()
• pugCompile()
• imagesOptimize()

To start the task, run gulp:

The layoutCompile task only calls functions related to the compilation of layout files. The gulp layoutCompile command runs it:

The assetsOptimize task calls the imagesOptimize() function. The gulp assetsOptimize command runs it:

Do it yourself

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