Code sample from my talk at Ottawa JS on Grunt - May 8, 2013. Code samples on GitHub at https://github.com/fabien-d/OttawaJS-Grunt.

1. /Fabien Doiron @fabien_doiron

2. WHAT'S INSIDE?
what is grunt
why use grunt
setup grunt dependencies
important commands
starting a new grunt project
grunt in action

3. FABIEN DOIRON?
Software Developer - Front End
 fabien-d fabien_doiron

4. WHAT IS GRUNT?
"cowboy" Ben Alman
(in other words: JavaScript task runner)
current stable version: 0.4.1
“task-based command line build tool for
JavaScript projects that makes performing
repetitive but necessary tasks trivial”

5. WHY USE GRUNT?
open source software
large community
ease of use
project sponsored by Bocoup
hundreds of plugins
or build your own

6. SETUP GRUNT DEPENDENCIES

7. INSTALL NODE + NPM
(I'd suggest looking at NVM)
www.nodejs.org

8. UNINSTALL GRUNT
if you've installed grunt globally in the past
npm uninstall -g grunt

9. INSTALL GRUNT CLI
(Command Line Interface)
does NOT install the grunt task runner
allows multiple version of grunt simultaneously
npm install -g grunt-cli

10. IMPORTANT GRUNT COMMANDS
installs all dev dependencies from package.json
'--save-dev' adds module to package.json as dev dependency
grunt modules are installed in 'node_modules/' directory
npm install
npm install {{PACKAGE_NAME}} --save-dev
grunt grunt {{TASK}}
grunt {{TASK}}:{{TARGET}}

11. STARTING A NEW GRUNT PROJECT
create 2 files
package.json Gruntfile.js

12. PACKAGE.JSON EXAMPLE
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.4.3"
}
}

13. GRUNTFILE.JS
easy as 1, 2, 3 ... 4*

14. 1. install module
(terminal, project root directory)
2. load module
(Gruntfile.js)
npm install grunt-contrib-jshint --save-dev
grunt.loadNpmTasks('grunt-contrib-jshint');

15. 3. configure task
(Gruntfile.js)
4. register task*
(Gruntfile.js) * register is optional
grunt.initConfig({
jshint: { ... }
});
grunt.registerTask('default', ['jshint']);

16. GRUNTFILE.JS EXAMPLE
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: { ... }
});
// Load the "jshint" task.
grunt.loadNpmTasks('grunt-contrib-jshint');
// Register task(s).
grunt.registerTask('default', ['jshint']);
};

17. GRUNT FOLDER STRUCTURE
node_modules/
grunt/
grunt-contrib-jshint/
Gruntfile.js
package.json

18. GRUNT IN ACTION
JS linting*
watch task*
JS minification
clean
JS testing (mocha/chai)
SASS -> CSS
dev tasks & prod tasks
replace scripts in HTML files
* build together

19. RESOURCES


nodejs.org
npmjs.org
gruntjs.com
gruntjs plugins
gruntjs stackoverflow
gruntjs
fabien-d

20. END