Gulp Combining Tasks - Gulp

What is Gulp Combining Tasks?

Task authorizes a modular approach to configure Gulp. A task has to be created for each dependency, which we would increase as we find and install new plugins. Gulp task will have following structure:

Here “task-name” is a string name and “function()” performs your task. The “gulp.task” acts as a register for the function task within the name and specifies the dependencies on other tasks.

How to install Plugins in Gulp?

Let's consider a plugin called minify-css to merge and minify all CSS scripts. This can be installed by using npm by the following command:

  • TO work with “gulp-minify-css plugin”,We need to install another plugin called “gulp- autoprefixer” as shown in the below command:

  • Install the gulp-concat To concatenate the CSS files, as shown in the below command:

You need to write dependencies to concatenate the CSS files, and use the configuration file as follows:

How to add a Task to Gulp file?

An individual task has to be created for each dependency, which we would increase as we install the plugins. The Gulp task will have following structure:

Concat plugin concatenates the CSS files and ‘autoprefix’ plugin indicates the current and the older versions of all browsers. It minifies all CSS scripts from src folder and copies them all to the build folder by calling ‘dest’ method with an argument, which represents the target directory.

  • Use the following command in your project directory to run the following task:

Similarly, we will be using another plugin called ‘gulp-imagemin’ to compress the image file, which can be installed using the following command:

You can add any number of dependencies to your configuration file using the following command.

Also,you can create the task for above defined dependency as shown in the following code.

The images located in “src/images/**/*” are saved in the img_srcobject. It is piped by using pipes to other functions created by the ‘imagemin’ constructor. It compresses the images from src folder and copies them into the build folder by calling ‘dest’ method with an argument, which represents the target directory.

Use the following command in your project directory to run the task :

How to combine Multiple Tasks in Gulp?

We can run multiple tasks at a time by creating a default task in the configuration file as shown in the following code:

Once the gulp file is set up and ready to execute. Run the following command in your project directory to run the above combined tasks:

By running the task using the above command, you will get the following result in the command prompt:

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Gulp Topics