Grunt - The JavaScript Task Runner

5,744 views

Published on

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

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
5,744
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
240
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Grunt - The JavaScript Task Runner

  1. 1. 1GRUNTTHE JAVASCRIPT TASKRUNNERMohammed ArifManager Interactive Development @ SapientNitrowww.mohammedarif.comhttps://twitter.com/#!/arif_iqhttp://in.linkedin.com/in/mohdarif
  2. 2. 2AGENDA 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. 3WHAT ISGRUNT?Grunt is a task-based command line build tool for JavaScriptprojects.
  4. 4. 4TASK-BASED?• Unit testing• JS linting• Concatenating/minifying• Image optimization• Replace scripts in html files• SASS• …
  5. 5. 5WHY GRUNT?• Open Source• Large Community• Easy to use• Hundreds of plugins• Build your own (plugin)
  6. 6. 6WHY GRUNT?Anthttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  7. 7. 7WHY GRUNT?Grunthttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  8. 8. 8HOW DO I START GRUNT?http://gruntjs.com/getting-started• npm• node.js
  9. 9. 9NPM?npm {Node Packaged Modules} manages dependencies for anapplication through the command line.https://npmjs.org
  10. 10. 10NODE.JS?node.js is an open source command line tool built for the server sideJavaScript.The JavaScript is executed by the V8 (Googles open sourceJavaScript engine).http://www.ibm.com/developerworks/library/os-nodejs/
  11. 11. 11HOW DO I INSTALL GRUNT CLI?$ npm install -g grunt-cliThis will put the grunt command in your system path, allowing it tobe run from any directory.* Note that installing grunt-cli does not install the grunt task runner!You need to install Grunts command line interface (CLI) globally.
  12. 12. 12HOW DO I INSTALL GRUNT?$ npm install grunt –-save-devThis 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. 13HOW DO I USE GRUNT?• package.json• GruntFile.js
  14. 14. 14package.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. 15GruntFile.jsmodule.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. 16DEMO$ git clone -b 1.1 git@github.com:mdarif/JavaScript-Boilerplate.git$ npm install
  17. 17. 17WHO HAVE BEEN USING IT?• jQuery• Yeoman• Modernizr• Adobe• Twitter• Filament Group• Bocoup• …
  18. 18. Q & A
  19. 19. 19feedback
  20. 20. 20THANK YOU

×