Grunt JS

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.

Transcript

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 n p m u n i n s t a l l - g g r u n t
9. INSTALL GRUNT CLI (Command Line Interface) does NOT install the grunt task runner allows multiple version of grunt simultaneously n p m i n s t a l l - g g r u n t - c l i
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 n p m i n s t a l l n p m i n s t a l l { { P A C K A G E _ N A M E } } - - s a v e - d e v g r u n t g r u n t { { T A S K } } g r u n t { { T A S K } } : { { T A R G E T } }
11. STARTING A NEW GRUNT PROJECT create 2 files p a c k a g e . j s o n G r u n t f i l e . j s
12. PACKAGE.JSON EXAMPLE { " n a m e " : " m y - p r o j e c t " , " v e r s i o n " : " 0 . 1 . 0 " , " d e v D e p e n d e n c i e s " : { " g r u n t " : " ~ 0 . 4 . 1 " , " g r u n t - c o n t r i b - j s h i n t " : " ~ 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) n p m i n s t a l l g r u n t - c o n t r i b - j s h i n t - - s a v e - d e v g r u n t . l o a d N p m T a s k s ( ' g r u n t - c o n t r i b - j s h i n t ' ) ;
15. 3. configure task (Gruntfile.js) 4. register task* (Gruntfile.js) * register is optional g r u n t . i n i t C o n f i g ( { j s h i n t : { . . . } } ) ; g r u n t . r e g i s t e r T a s k ( ' d e f a u l t ' , [ ' j s h i n t ' ] ) ;
16. GRUNTFILE.JS EXAMPLE m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { / / P r o j e c t c o n f i g u r a t i o n . g r u n t . i n i t C o n f i g ( { p k g : g r u n t . f i l e . r e a d J S O N ( ' p a c k a g e . j s o n ' ) , j s h i n t : { . . . } } ) ; / / L o a d t h e " j s h i n t " t a s k . g r u n t . l o a d N p m T a s k s ( ' g r u n t - c o n t r i b - j s h i n t ' ) ; / / R e g i s t e r t a s k ( s ) . g r u n t . r e g i s t e r T a s k ( ' d e f a u l t ' , [ ' j s h i n t ' ] ) ; } ;
17. GRUNT FOLDER STRUCTURE n o d e _ m o d u l e s / g r u n t / g r u n t - c o n t r i b - j s h i n t / G r u n t f i l e . j s p a c k a g e . j s o n
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