a blog for those who code

Friday 28 August 2015

Getting familiar with Grunt JS - Part 1

In this post we are going to discuss about Grunt JS - The JavaScript Task Runner. Grunt is a JavaScript Task Runner which will automate the repetitive tasks and will save some of your development time. Grunt will do the repetitive tasks for you like minification, compilation, unit testing etc whatever you instruct Grunt to do.

For example, you have change your source code and wanted to test that you did not messed up anything than you can simply give this task to Grunt, it will handle everything for you. It is written in JavaScript built on top of Node.js.

Installing Grunt

Grunt and Grunt plugins are installed and managed via npm (Node.js package manager). Before installing Grunt you need to make sure that Node.js is installed.

1. Install grunt : npm install -g grunt

2. Install grunt-cli (Grunt Command Line) : npm install -g grunt-cli

3. Install grunt-init (Scaffloding Tool) : npm install -g grunt-init

Setup Grunt

After you have installed all the grunt plugins, it is the time to add Grunt to our project. We will use Grunt's Project Scaffolding tools to generate a project.

At first run : grunt-init --help you will see something like below.

It says that No templates found and you need to create one. So for the Grunt scaffolding to work properly we will clone the project template from https://github.com/gruntjs/grunt-init-gruntfile using the below command

git clone https://github.com/gruntjs/grunt-init-gruntfile.git C:\Users\[UserName]\.grunt-init\gruntfile

The above command will add the grunt file template to the .grunt-init folder. Now after running above command you will get the templates when you again run the command grunt-init --help

Now run the command grunt-init gruntfile, you will be asked few questions as shown below.

After this two files will be created for you Gruntfile.js and package.json. You need to run npm install to install the project dependencies. After running npm install all the project dependencies will be included in node_modules folder.

In the next part we will show you how to run Grunt in a project. Please Like and Share CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment