Grunt - The JavaScript Task Runner

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

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. 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. WHAT IS GRUNT? Grunt is a task-based command line build tool for JavaScript projects.

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

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

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

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

8. HOW DO I START GRUNT? http:// gruntjs.com /getting-started n pm n ode.js

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

10. NODE.JS? n ode.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. 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. HOW DO I INSTALL GRUNT? $ npm install grunt –-save- dev T his 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. HOW DO I USE GRUNT? p ackage.json GruntFile.js

14. p ackage.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. 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. DEMO $ git clone -b 1.1 [email protected]:mdarif /JavaScript- Boilerplate.git $ npm install

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

18. Q & A

19. feedback

20. THANK YOU