GULP !!!

Gulp is a Java Script based task runner build tool, which can automate the common task while building an application.  There are many tools available in the market which do the same work such as Grunt, Broccoli etc. Gulp is preferred a bit because of its faster performance using the stream line.

Gulp is a Java Script based task runner build tool, which can automate the common task while building an application. There are many tools available in the market which do the same work such as Grunt, Broccoli etc. Gulp is preferred a bit because of its faster performance using the stream line.

In this article we will learn how to use gulp in your project. Gulp uses plugins to automate the task and these plugins can be installed and managed by using Node Package Manager (​npm​). We need to have npm installed before using gulp.

If you don’t have Node installed, then get it from here.

Once you have installed Node, to install gulp use the following command in your CLI.

> npm install gulp -g

The above command installs gulp in the machine and the flag -g in the command instructs the npm to install the gulp globally in the machine, so that we can use Gulp from anywhere in the system .

> npm install gulp --save-dev

Executing the above command creates the gulp folder in node_module folder of the project. Gulp is flexible enough to work with any folder structure. We can create a gulp task in a file called gulpfile.js, which stores all the gulp configuration.

First step of using gulp is to require it in our gulpfile.js

Syntax for creating a task :

Code :

To run the above task use the following command .

> gulp hello

Gulp tasks can be complicated, it may contain two more additional methods with variety of plugins.

Sample code :

Let's start adding a plugin and see how to use that plugin in our project. Gulp has a big base for plugins which can be used to automate a whole lot. But in this article we will use three different plugins and achieve a common automation task. Following is an overview of our task.

1. Concatenate all the CSS files.

2. Minifying all the JS files.

3. 3. Watches the specified files and update accordingly.

Generally, using a plugin makes development process easier. The above plugins are mostly used in every development process. In web application development, while delivering the application, it's not recommended to deliver all the css files . We can merge all the css files into a single file using concatenate plugin.

Usually, we use bundles of javascript files in project. Comment and indentation in code occupies more space which is not a part in the process of compilation and product delivery. So to remove indentation and comments minification is required.

Watch is the most useful package in gulp. In every web application development, the developers use gulp’s watch feature. Watch package watches specific file(s) and performs specific task(s), when the file is modified. We can add 'n' number of watchers in our gulpfile.js.

Concatenate:

In this task we will concatenate all the CSS files in the project. To begin with, we need to install gulp-concat package by using following command.

> npm install --save-dev gulp-concat

After installation use the following code snippet to concatenate the all the css present in the project.

Code:

To run the above task use the following command.

> gulp concat

Note: if you want to run your task as default, then mention the task name as ‘default’.

Minify:

Most of our development projects require minifying the JavaScript files before deployment, so in this task let us automate the minifying process. Let’s install gulp-uglify package.

>npm install gulp-uglify --dev-save

In the gulpfile.js declare the task as the following .

Execute the task using gulp command.

>gulp script

Watch:

We have already learned to concatenate the css files and minifying the js files, Let's watch our Java Script (.js) and CSS (.css) files using watch method.

Run the watch task using following command.

>gulp watch

Conclusion :

 In this article we have learned how to install and use gulp. We have implemented 3 plugins in our project and learned the work flow of gulp. There are lot more gulp plugins available for different purposes. To know more about gulp use different plugins and implement the package in your project to automate your task.