• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Grunt - The JavaScript Task Runner

Grunt - The JavaScript Task Runner



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 5 2
https://twitter.com 1
https://www.rebelmouse.com 1
http://www.linkedin.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Grunt - The JavaScript Task Runner Grunt - The JavaScript Task Runner Presentation Transcript

    • 1GRUNTTHE JAVASCRIPT TASKRUNNERMohammed ArifManager Interactive Development @ SapientNitrowww.mohammedarif.comhttps://twitter.com/#!/arif_iqhttp://in.linkedin.com/in/mohdarif
    • 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
    • 3WHAT ISGRUNT?Grunt is a task-based command line build tool for JavaScriptprojects.
    • 4TASK-BASED?• Unit testing• JS linting• Concatenating/minifying• Image optimization• Replace scripts in html files• SASS• …
    • 5WHY GRUNT?• Open Source• Large Community• Easy to use• Hundreds of plugins• Build your own (plugin)
    • 6WHY GRUNT?Anthttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    • 7WHY GRUNT?Grunthttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    • 8HOW DO I START GRUNT?http://gruntjs.com/getting-started• npm• node.js
    • 9NPM?npm {Node Packaged Modules} manages dependencies for anapplication through the command line.https://npmjs.org
    • 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/
    • 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.
    • 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
    • 13HOW DO I USE GRUNT?• package.json• GruntFile.js
    • 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"}}
    • 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]);};
    • 16DEMO$ git clone -b 1.1 git@github.com:mdarif/JavaScript-Boilerplate.git$ npm install
    • 17WHO HAVE BEEN USING IT?• jQuery• Yeoman• Modernizr• Adobe• Twitter• Filament Group• Bocoup• …
    • Q & A
    • 19feedback
    • 20THANK YOU