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 client side tasks.
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 tool while tools like Bower, npm are package managers.
Gulp is built upon Node.js and it already has a strong community that builds various plugins for performing various tasks. There are currenlty more than 3000+ plugins available here which makes almost every possible tasks we can think of can be automated. The gulp tasks are writted in javascript file called gulpfile.js which will be executed by Gulp tool.
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 from html files and minifying JavaScript files. Finally, we will use gulp to copy the resultant 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 configure the application to use npm package manager. This is because, Gulp is installed by using npm. Type the npm init command and press enter to create package.json file. This will ask series of basic questions about the application and finally create a package.json file under the application root folder. This file will store the npm package dependencies for the application. You can equate this step to having a package.config file for storing nuget package dependency in visual studio projects. 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 for npm 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 root folder, we will have our uncleaned html files in src folder. We will now create gulp tasks to clean these files and move it to destination folder called build under the root.
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. The gulp task for cleaning the files and moving to destination is below.
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, let's understand the gulp api we will use to create tasks. There are primarily 4 methods exposed by Gulp to build tasks. They are,
-
gulp.task
-
Helps to create a new task.
-
gulp.src
-
Read files from the specified folder
-
gulp.dest
-
Writes the processed files into the specified destination folder
-
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 via 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 project.
npm install gulp-uglify --save-dev
Similar to html files, lets have our development version of javascript files under src folder.
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 issue 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']);