Grunt is a task-based command line build tool for JavaScript projects.

1. 1
GRUNT
THE JAVASCRIPT TASK
RUNNER
Mohammed Arif
Manager Interactive Development @ SapientNitro
www.mohammedarif.com
https://twitter.com/#!/arif_iq
http://in.linkedin.com/in/mohdarif

2. 2
AGENDA
 What is grunt?
 Why Grunt?
 How Do I start?
 npm
 Node.js
 How Do I Install it?
 How Do I Use it?
 Demo
 Who have been using it?
 Q & A

3. 3
WHAT IS
GRUNT?
Grunt is a task-based command line build tool for JavaScript
projects.

4. 4
TASK-BASED?
• Unit testing
• JS linting
• Concatenating/minifying
• Image optimization
• Replace scripts in html files
• SASS
• …

5. 5
WHY GRUNT?
• Open Source
• Large Community
• Easy to use
• Hundreds of plugins
• Build your own (plugin)

6. 6
WHY GRUNT?
Ant
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

7. 7
WHY GRUNT?
Grunt
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

8. 8
HOW DO I START GRUNT?
http://gruntjs.com/getting-started
• npm
• node.js

9. 9
NPM?
npm {Node Packaged Modules} manages dependencies for an
application through the command line.
https://npmjs.org

10. 10
NODE.JS?
node.js is an open source command line tool built for the server side
JavaScript.
The JavaScript is executed by the V8 (Google's open source
JavaScript engine).
http://www.ibm.com/developerworks/library/os-nodejs/

11. 11
HOW DO I INSTALL GRUNT CLI
?
$ npm install -g grunt-cli
This will put the grunt command in your system path, allowing it to
be run from any directory.
* Note that installing grunt-cli does not install the grunt task runner!
You need to install Grunt's command line interface (CLI) globally.

12. 12
HOW DO I INSTALL GRUNT?
$ npm install grunt –-save-dev
This will install the latest version of Grunt in your project folder,
adding it to your devDependencies in package.json
* Same way you can install the grunt plugins i.e. npm install {module} --save-dev

13. 13
HOW DO I USE GRUNT?
• package.json
• GruntFile.js

14. 14
package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
}

15. 15
GruntFile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%=
grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

16. 16
DEMO
$ git clone -b 1.1 git@github.com:mdarif/JavaScript-
Boilerplate.git
$ npm install

17. 17
WHO HAVE BEEN USING IT?
• jQuery
• Yeoman
• Modernizr
• Adobe
• Twitter
• Filament Group
• Bocoup
• …

18. Q & A

19. 19
feedback

20. 20
THANK YOU