Grunt - The JavaScript Task Runner
-
Upload
mohammed-arif -
Category
Technology
-
view
119 -
download
2
description
Transcript of Grunt - The JavaScript Task Runner
1
GRUNTTHE JAVASCRIPT TASK RUNNER
Mohammed ArifManager Interactive Development @ SapientNitro
www.mohammedarif.comhttps://twitter.com/#!/arif_iqhttp://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
• npm• node.js
9
NPM?
npm {Node Packaged Modules} manages dependencies for an application through the command line.
https://npmjs.org
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
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
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
HOW DO I USE GRUNT?
• package.json• GruntFile.js
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
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']);};
17
WHO HAVE BEEN USING IT?
• jQuery• Yeoman• Modernizr• Adobe• Twitter• Filament Group• Bocoup• …
Q & A
19
feedback
20
THANK YOU