This document discusses Grunt, an open source JavaScript task runner. It begins with an agenda that outlines what Grunt is, why it's useful, who uses it, and how to get started and use it. The document then explains that Grunt allows developers to automate tasks like minification, validation, and compilation using plugins. It also provides instructions for installing Grunt and the Node.js tools it requires, as well as creating a Gruntfile configuration file and package.json file to define and run tasks. Popular plugins allow tasks like linting, minification, concatenation, and live reloading to improve the JavaScript development workflow.

1. Andrii Siusko
11/19/2013
GRUNT JS
Grunt JavaScript Automation for the Lazy Developer

2. Agenda
 What is grunt?
 Why Grunt?
 Who have been using it?
 How Do I Start?
 How Do I Use?
 Plugins
 Demo
 Questions

3. What is grunt?
Grunt is a task-based
command line build tool
for JavaScript projects.
• $ grunt less
• $ grunt csslint
• $ grunt jshint jslint
• $ grunt clean
• $ grunt watch
• $ grunt server
• $ grunt jasmine
• $ grunt dev production

4. Why Grunt?
• Open Source
• Large Community
• Hundreds of plugins
• Build your own (plugin)
• This is easy!

5. Who have been using it?

6. How Do I Start?
• node.js
npm {Node Packaged Modules} manages dependencies for
an application through the command line.
• 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!
• 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
note: way you can install the grunt plugins: npm install {module} --save-dev
http://nodejs.org/download/ http://gruntjs.com/getting-started

7. How Do I Use?
• package.json
• GruntFile.js

8. How Do I Use?
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"
}
}

9. How Do I Use?
• GruntFile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: ['js/**/*.js', 'src/js/**/*.js'],
dest: ‘dev/js/app.js'
}
},
cssmin : { ... },
clean: { ... },
watch: { ... },
});
// loaded a task from a npm module
grunt.loadNpmTasks('grunt-contrib-cssmin');
//setup our workflow
grunt.registerTask("dev", ["concat:js", "cssmin"]);
}

10. Plugins
• JSHint/JSLint
• Minify
• Concatenate
• Watch
• LESS/SASS
• Stylus
• Imagemin
• Web-server
• Remove-logging
• …

11. Demo

12. Questions