Grunt - The JavaScript Task Runner

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

Transcript

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  tes(ng   •  JS  lin(ng   •  Concatena(ng/minifying   •  Image  op(miza(on   •  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   hHp://mechanics.flite.com/blog/2012/06/19/why-­‐we-­‐use-­‐node-­‐dot-­‐js-­‐and-­‐grunt-­‐to-­‐build-­‐javascript/  
7. 7 WHY GRUNT? Grunt   hHp://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? hHp://gruntjs.com/geUng-­‐started   •  npm   •  node.js  
9. 9 NPM? npm {Node Packaged Modules} manages dependencies for an application through the command line. hHps://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). hHp://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   •  TwiHer   •  Filament  Group   •  Bocoup   •  …  
18. Q & A
19. 19 feedback
20. 20 THANK YOU