CodeDigest.Com Logo
Featured:

What is Gulp? How to Use Gulp?

Gulp is yet another tool from open source community to automate repetitive tasks in web development. While tools like bower, npm (Node Package Manager) helps us to download and configure re-usable packages in our application, Gulp helps us to automate many of the time consuming repetitive tasks during development.

 

These are tasks like bundling and minifying scripts and style sheets, compiling less or sass to css styles, deploying files to servers, image compressing, etc. So, in simple terms Gulp is a task runner while tools like Bower, npm are package managers.

As mentioned above, Gulp is built upon Node.js and it already has a strong community that builds various plugins for performing various tasks. Every tasks are automated by using various gulp plugins available here. There are more than 3000+ plugins available already which makes almost every possible tasks can be automated by using Gulp.

Installing Gulp

Gulp can be installed by using npm (Node Package Manager) tool either machine wide or locally to the application. As a prerequisite, Gulp requires Node.js installed first. Download and install Node.js from here. Installing Node.js will also install npm package manager.

After installation, you can verify the installation by executing node -v and npm –v commands in command prompt. This command will output the version of the respective installation similar to below.

To install Gulp machine wide (globally), open command prompt and type the below command and enter.

 

npm install gulp-cli -g

 

-g stands for global installation. This will download and install Gulp globally in the machine. Refer below,

After installation, verify the Gulp installation and version,

 

C:\QuickStart\GulpDemo>gulp -v

[20:41:32] CLI version 1.3.0

 

Using Gulp

Let’s try to use gulp to automate 2 simple tasks removing white spaces in html file and minifying JavaScript files using Gulp. Finally, we will use gulp to copy the final files into a build folder. Assume our application reside under a folder C:\QuickStart\GulpDemo. Instead of using globally installed Gulp, we will install a local version of gulp into the application folder and use it.

To do this, reach the application folder in the command prompt and let’s configure the application to use npm package manager. This is because, Gulp is installed by using npm. Type the npm init command and enter to create package.json file to store the npm package dependencies for the application. This will ask series of basic questions about the application and finally create a package.json file under the application root folder. Refer below,

The created package.json looks like,

 

{

  "name": "gulpdemo",

  "version": "1.0.0",

  "description": "test",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

 

The package.json is similar to package.config used by Nuget to store the application dependencies. By having a local installation of Gulp, when the app is got latest from version control it will configure the app with all its dependencies locally instead of using a global installations.

Next, let’s install Gulp locally,

 

npm install gulp --save-dev

 

This will download and install gulp locally into a folder called node_modules under the root folder. The –save-dev switch will save Gulp as a development dependency in package.json. So, we now have all the basic setup done to use a local installation of Gulp in our application.

Adding a HTML Task

We will now get a gulp plugin that helps us to remove the white space in html files. The plugin to use for this task is gulp-htmlclean and the command to install is,

 

npm install gulp-htmlclean --save-dev

 

Under application folder, we will have the html files and JavaScript files in src folder under application root. We will clean these files and move it to build folder under the root folder.

The Gulp tool requires all the tasks to be written a javascript file called gulpfile.js. First, lets create a new javascript file called gulpfile.js under the app root.

gulpfile.js

 

var gulp = require('gulp'), htmlclean = require('gulp-htmlclean');

 

  var folders = {

    src: 'src/',

    build: 'build/'

  };

 

 gulp.task('html', function() {

  var out = folders.build + 'html/'; 

  return gulp.src(folder.src + 'html/**/*')

  .pipe(htmlclean())

  .pipe(gulp.dest(out));

});

 

Before understanding the above code, there are primarily 4 methods exposed by Gulp to build tasks. They are,

  1. gulp.task

  • Helps to create a new task.

  1. gulp.src

  • Read files from the specified folder

  1. gulp.dest

  • Writes the processed files into the specified destination folder

  1. gulp.watch

  • Watches or monitors the specified source and calls a task when there is any change occurred in the source.

There is another method called readable.pipe() which actually chains the above gulp methods to perform a task. Gulp actually work with Streams i.e. the gulp.src() method reads files as Stream from source and pass it to a gulp plugin through pipe() method for doing a task. So, the pipe() method reads the stream from the gulp.src(), execute the plugin task and passes it to destination stream gulp.dest() to write it to destination.

Going back to script in gulpfile.js, it creates task called html which reads the html files from src/html folder and pipes it through htmlclean() plugin and writes the output files into build/html folder. The require() methods at the top includes gulp and gulp-htmlclean() plugin for creating tasks. Save this file and execute the task from command prompt like below. The command syntax is gulp [taskname]. See below,

 

C:\QuickStart\GulpDemo>gulp html

[22:15:22] Using gulpfile C:\QuickStart\GulpDemo\gulpfile.js

[22:15:22] Starting 'html'...

[22:15:22] Finished 'html' after 147 ms

 

This will remove the whitespaces in the source html files and copy the output html files into build/html folder.

Adding JavaScript Minify Tasks

To minifying Javascript file, add uglify gulp plugin into our poroject.

 

npm install gulp-uglify --save-dev

 

Update the gulpfile.js to include new task to minify JavaScript file and copy it to the destination. Also, include gulp-uglify plugin in include statement. The tasks below,

 

var gulp = require('gulp'),htmlclean = require('gulp-htmlclean'),uglify = require('gulp-uglify');

  var folders = {

    src: 'src/',

    build: 'build/'

  };

 

 gulp.task('html', function() {

  var out = folders.build + 'html/'; 

  return gulp.src(folder.src + 'html/**/*')

  .pipe(htmlclean())

  .pipe(gulp.dest(out));

});

 

gulp.task('js',['html'], function() {

  return gulp.src(folders.src + 'js/**/*')

  .pipe(uglify())

  .pipe(gulp.dest(folders.build + 'js/'));

 

 

The new task “js” makes the html task as dependent task and makes it to execute first. To execute the task, go to command prompt and execute gulp js

 

C:\QuickStart\GulpDemo>gulp js

[22:22:52] Using gulpfile C:\QuickStart\GulpDemo\gulpfile.js

[22:22:52] Starting 'html'...

[22:22:52] Finished 'html' after 306 ms

[22:22:52] Starting 'js'...

[22:22:54] Finished 'js' after 2.21 s

 

Creating a Default Task

We can create a default task in gulpfile.js that runs all the tasks in the project when we issues the command gulp from command prompt.

 

gulp.task('default', ['js']);

 

Executing All Tasks

Now, typing gulp and enter will run all the taks found in gulpfile.js in our project.

 

C:\QuickStart\GulpDemo>gulp

[22:26:05] Using gulpfile C:\QuickStart\GulpDemo\gulpfile.js

[22:26:05] Starting 'html'...

[22:26:05] Finished 'html' after 137 ms

[22:26:05] Starting 'js'...

[22:26:07] Finished 'js' after 2.24 s

[22:26:07] Starting 'default'...

[22:26:07] Finished 'default' after 48 µs

 

After execution, you can see the output files placed under build folder.

The final gulpfile.js is,

 

var gulp = require('gulp'),htmlclean = require('gulp-htmlclean'),uglify = require('gulp-uglify');

 

  var folders = {

    src: 'src/',

    build: 'build/'

  };

 

 gulp.task('html', function() {

  var out = folders.build + 'html/'; 

  return gulp.src(folder.src + 'html/**/*')

  .pipe(htmlclean())

  .pipe(gulp.dest(out));

});

 

gulp.task('js',['html'], function() {

  return gulp.src(folders.src + 'js/**/*')

  .pipe(uglify())

  .pipe(gulp.dest(folders.build + 'js/'));

});

 

gulp.task('default', ['js']);