Using Gulp – Part 1


If you are a web developer and if you have been using Grunt (JS task runner) , then Gulp is what you should definitely take a look at.

If you are not familiar with Grunt or any other JS task runners, then this could be a good starting point.

So what is Gulp?

A build system (or task runner) that can help automate common tasks during web development, such as

  • linting JS files
  • concatenate JS files for production
  • minifying JS
  • compiling preprocessed CSS
  • reloading browser

and many more.

Screen Shot 2014-09-10 at 11.28.18 AM

Typical development tasks

Gulp would help automating the tasks ( as shown in the pic above) .  Doing the common tasks manually each  time would decrease productivity and is prone to human error.

I would explain on how to setup gulp and automate some of the above tasks.

How to setup (on Mac OSX)?

1. Install Node 

Go to

Node installation comes with npm (node package manager) 

2.Validate Node and npm installation by using the following command lines:

$node -v
$npm -v

If you see the versions then node and npm has been correctly installed

3. Install gulp globally to be available for all projects on your system: 

$sudo npm install -g gulp

4.Validate gulp by using the following command lines:

$gulp -v
[12:43:52] CLI version 3.8.7
[12:43:52] Local version 3.8.7

If you see the versions then gulp has been correctly installed

Now that node, npm and gulp has been setup , will see how to use gulp in a project.

Using Gulp in a Project

Lets say we have the following tasks to manually execute in our web project :

  • linting all js files
  • compressing images
  • precompiling css
  • concatenating multiple js scripts
  • minifying js scripts
  • refreshing browser to reload content

Let us go with the following project structure


├── index.html

├── package.json

└── src 

    ├── images (all images stored here)

    ├── js (all js files stored here)

    └── less (all .less files stored here)

Step 1 : Add a package.json at the root folder manually or by using command line :

$cd ~/Project
$npm init

npm init will guide in creating a package.json

Normally the initial package.json would be like :

$cat package.json
  "name": "Project",
  "version": "1.0.0",
  "description": "My Project Description"

Step 2 : Instal gulp locally into the project folder

$sudo npm install gulp --save-dev
This will add gulp as a devDependency in the package.json file and create a nodes module folder with all plugin sources .
$cat package.json
  "name": "Project",
  "version": "1.0.0",
  "description": "My Project Description"
  "devDependencies": {
    "gulp": "^3.8.7"

So far so good.

In Part 2 ( Using Gulp Part 2 ) we will talk about linting, concatenating, minifying,precompiling.

Posted in Web Technology
0 comments on “Using Gulp – Part 1
1 Pings/Trackbacks for "Using Gulp – Part 1"
  1. Using gulp says:

    […] from Using Gulp – Part 1 , we first start with linting js […]

Leave a Reply

Your email address will not be published. Required fields are marked *