Using Gulp – Part 1

gulp

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 http://nodejs.org

Node installation comes with npm (node package manager) 

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

$node -v
v0.10.29
$npm -v
2.0.0-alpha-5

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

Project

├── 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

$pwd
~/Project
$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 *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news