Gulp Task

Updated February 17, 2023

Introduction to Gulp Task

We know that gulp is an open-source, cross-platform tool that provides different kinds of features to the developer. During the development, the developer needs to automate the other development tasks; at that time, we can use the gulp task per the developer’s requirement. When we think at a high level, gulp reads the different files and puts them into the pipes to stream their tasks. All these tasks depend on the code; sometimes, we need to add additional plugins per requirement. The main thing about the job is that it helps us modify the source file into production files.

What is a Gulp Task?

All Gulp setup goes in a record called gulpfile.js, situated at the foundation of the undertaking. The example for composing assignments is that you first burden a module you will utilize and characterize a project that depends on that module afterward. Gulp is module-driven; you want to know which module to use to achieve something. Usually, a solitary module has a solitary reason, and all the modules are customary JavaScript.

To characterize an undertaking, utilize the gulp.task() work. Whenever you characterize a straightforward undertaking, this capacity takes two ascribes the assignment’s name and a capacity to run.

Code:

gulp.task('sample', work () {
console.log('Hello welcome');
});

Running swallow welcome will bring about “Hi welcome” being printed to the control center.

An assignment may likewise be a rundown of different errands. For example, assume we need to characterize a form task that runs three various assignments, CSS, js, and images. Again, we can do this by indicating a variety of undertakings rather than the capacity:

Code:

gulp.task('build', ['css', 'js', 'images']);

Default Tasks:

These will run non-concurrently, so you can’t expect that the CSS errand will have completed the running process when js begins; truthfully, it most likely will not. To ensure that an errand has been completed before one more job runs, you can indicate conditions by joining the variety of assignments with the capacity. For instance, you can do this to characterize a CSS task that checks that the welcome assignment has been done before it runs.

Code:

gulp.task('css', [''sample''], work () {
// Manage CSS here
});

When you run the CSS task, Gulp will execute the welcome assignment, hang tight for it to get done, and call the capacity you’ve determined afterward.

Default Tasks:

You can characterize a default task that runs when you gulp. You can do this by characterizing an errand named default.

Code:

gulp.task('default', work () {
// default task
});

Usage Gulp Task:

Now let’s see the usage gulp task as follows:

First, let’s see how we can register tasks with names as follows:

Code:

const { task } = require('gulp');
function build(demo) {
// body of function is omitted
demo();
}
task(build);

Explanation:

• In the above example, we try to implement a task with a registered name; here, we define the const task as shown in the above code, and after that, we create a function to build the task.

Let’s see how we can register functions with anonymous tasks as follows:

Code:

const { task } = require('gulp');
task('build', function(demo) {
// body of function is omitted
demo();
});

Explanation:

• In the above example, we can see the anonymous function; here, we define the const task and create an anonymous function name declared in the function.

Let’s see how we can access registered names as follows:

Code:

const { task } = require('gulp');
task('build', function(demo) {
// body of function is omitted
demo();
});
const build = task('build');

Explanation:

• In the above example, we access an already registered task name, or we can say that by retrieving the task name at that time, we can use the above code as shown.

Parameters:

Let’s see what parameters we need to use while creating tasks as follows:

If the taskName isn’t given, the errand will be referred to by the name property of a named work or a client-characterized displayName property. The taskName boundary should be utilized for mysterious capacities missing a displayName property.

Let’s see different parameters with details as follows:

• taskname: This is one of the parameters used as an alias, the taskname is a string type, and we can access it as an alias within the specified task. The important thing is when we need to use the name for a taskfunction at that time; we require taskname.
• taskfunction: This is a required function, a combination of series() and parallel() functions; it also provides the attached for extra information.

Examples of Gulp Task

Let’s see a different example of a task for better understanding as follows:

First, we need to confirm all setup and installation of gulp with the help of the following command.

Code:

node -v

Explanation:

• Using the above command, we can see the installed version of Node.js; after execution, we can see the result in the following command.

Output:

In the command line prompt, enter the accompanying order to show the variant of npm (Node.js bundle chief), which is utilized to introduce modules. It will show the introduced Node.js form with the help of the below command.

Code:

npm -v

Explanation:

• After executing the above command, we can see the currently installed version of npm on our machine, as shown in the screenshot below.

Output:

We successfully installed Node.js; now, we need to install the gulp by using the below command.

Code:

npm install gulp -g

Explanation:

• In the above command, we use g for a flag that ensures gulp is globally available for all projects. After entering the above command, we get the following screen, as shown in the below screenshot.

Output:

For verification of gulp, we need to run the below command below.

Code:

gulp –v

Explanation:

• After executing the above command, we get the currently installed version of a gulp, as shown in the screenshot below.

Output:

Now let’s see how we can clean the html file as follows:

We usually know that gulp writes all tasks in a JavaScript file called gulfile.js, so first, create that file and write the following code.

Code:

var gulpfile = require('gulp'), htmlcleanfile = require('gulp-htmlclean');
var f = {
src: 'src/',
build: 'build/'
};
gulp.task('html', function() {
var o = folders.build + 'html/';
return gulp.src(folder.src + 'html/**/*')
.pipe(htmlclean())
.pipe(gulp.dest(o));
});

Output:

The final result is shown in the below screenshot:

Conclusion

With the help of the above article, we saw about the Gulp task. From this article, we saw basic things about the Gulp task and the integration of the Gulp task, and how we use it in the Gulp task.

Recommended Articles

This is a guide to Gulp Task. Here we discuss the introduction; what is a gulp task? And examples for better understanding. You may also have a look at the following articles to learn more –

1. JavaScript onresize
2. JavaScript onload
3. JavaScript String to Boolean
4. Javascript String to Lowercase