Register to get access to free programming courses with interactive exercises

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:

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.

Running a default task in Gulp

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:

Running a default Gulp task

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

Running a Gulp task

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

Running a Gulp task


Do it yourself

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


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

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

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.