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:
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.
When performing a task, Gulp shows not only the result of the task, but also additional information:
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 taskassetsOptimize
is the task that calls the imagesOptimize()
function. The gulp assetsOptimize
command is used to start the taskCreate three functions and export them using the parallel()
function. Create several different exports and practice calling tasks using the console
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.