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 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:


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.

Running a default task in Gulp

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

Running a default Gulp task

  • 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

Running a Gulp task

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

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 using the console


Hexlet Experts

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
Layout Designer icon
Profession
Under development beginner
Layout with the latest CSS standards
start anytime 5 months

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.