Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Grunt JS

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.

Fabien Doiron

May 09, 2013
Tweet

More Decks by Fabien Doiron

Other Decks in Technology

Transcript

  1. WHAT'S INSIDE? what is grunt why use grunt setup grunt

    dependencies important commands starting a new grunt project grunt in action
  2. 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”
  3. WHY USE GRUNT? open source software large community ease of

    use project sponsored by Bocoup hundreds of plugins or build your own
  4. 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
  5. 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 } }
  6. 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
  7. 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 " } }
  8. 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 ' ) ;
  9. 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 ' ] ) ;
  10. 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 ' ] ) ; } ;
  11. 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
  12. 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
  13. END