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.
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:
You need to write dependencies to concatenate the CSS files, and use the configuration file as follows:
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.
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 :
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:
Gulp Related Interview Questions
|Shell Scripting Interview Questions||CSS3 Interview Questions|
|HTML 5 Interview Questions||HTML DOM Interview Questions|
|Node.js Interview Questions||CSS Interview Questions|
|CSS Advanced Interview Questions||SASS (Syntactically Awesome Style sheets) Interview Questions|
|Spring Batch Interview Questions||Bootstrap3 Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.