Introducing Grunt.js, the JavaScript Task Runner

Introducing Grunt.js, the JavaScript Task Runner

A very practical introduction to using Grunt.js. Once the basics (installing, using) are adressed, we take on some more advanced, in depth topics such as tasks, "magic" config attributes and project scaffolding.

After this talk, you should be very comfortable to work with Grunt, create your own tasks and refactor them, understand some of the more advanced config attributes and create your own project scaffolding templates.

Grab the source demo code on github: https://github.com/toonketels/grunt-presentation-demo

Presented on Belgian Node.js User Group - Antwerp, Belgium - with Anthony Ringoet.

2aacf6307821d3301fac1f47a214307b?s=128

Toon Ketels

May 15, 2013
Tweet

Transcript

  1. 1.

    GRUNT.JS THE JAVASCRIPT TASK RUNNER Created by Presented by &

    @toonketels Anthony Ringoet Toon Ketels
  2. 3.

    HOW TO USE GRUNT? Installing All we need to know

    to use Grunt Tasks deep dive Magic config attributes Project scaffolding
  3. 5.

    GRUNT IN A NUTSHELL Javascript task runner Runs on command

    line Runs on node.js Rich plugin system with npm
  4. 6.
  5. 9.

    hmmm... me “ Invest time once up front to do

    the right thing, consistently do the right thing without any time cost.”
  6. 10.
  7. 15.

    REQUIREMENTS 1. Don't want to write all code myself 2.

    Easy to use 3. Future proof 4. Everybody else uses it
  8. 17.

    EASY TO USE Great (documented) API, great docs, great plugins

    to read the source from, posts, presentations...
  9. 26.

    n p m i n s t a l l

    - g g r u n t - c l i
  10. 28.

    p a c k a g e . j s

    o n G r u n t f i l e . j s
  11. 30.

    n p m i n s t a l l

    g r u n t - - s a v e - d e v
  12. 32.

    3 PARTS 1. Configuring tasks 2. Loading plugins and tasks

    3. Defining task aliases and custom tasks
  13. 33.

    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 ) { }
  14. 34.

    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 ' ) , / / . . . } ) ;
  15. 35.

    g r u n t . l o a d

    N p m T a s k s ( ' g r u n t - j a d e ' ) ;
  16. 36.

    g r u n t . r e g i

    s t e r T a s k ( ' n a m e ' , ' d e s c r i p t i o n ' , [ t a s k L i s t ] ) ;
  17. 38.
  18. 44.

    ALIAS TASK g r u n t . r e

    g i s t e r T a s k ( ' n a m e ' , ' d e s c r i p t i o n ' , [ t a s k l i s t ] ) ;
  19. 45.

    FUNCTION TASK g r u n t . r e

    g i s t e r T a s k ( ' n a m e ' , ' d e s c r i p t i o n ' , f u n c t i o n ) ;
  20. 46.

    MULTI TASK g r u n t . t a

    s k . r e g i s t e r M u l t i T a s k ( ' n a m e ' , ' d e s c r i p t i o n ' , f u n c t i o n ) ;
  21. 48.

    ARGUMENTS Arguments object + named arguments + t h i

    s . n a m e A r g s t h i s . a r g s t h i s . f l a g s
  22. 49.

    THIS { n a m e A r g s

    : ' i n t r o s p e c t : o n e : t w o ' , n a m e : ' i n t r o s p e c t ' , a r g s : [ ' o n e ' , ' t w o ' ] , f l a g s : { o n e : t r u e , t w o : t r u e } , a s y n c : [ F u n c t i o n ] , e r r o r C o u n t : [ G e t t e r ] , r e q u i r e s : [ F u n c t i o n ] , r e q u i r e s C o n f i g : [ F u n c t i o n ] , o p t i o n s : [ F u n c t i o n ] }
  23. 50.

    CONFIG g r u n t . c o n

    f i g . g e t ( t h i s . n a m e ) ;
  24. 51.

    PACKAGE INFO g r u n t . c o

    n f i g . g e t ( ' p k g ' ) ;
  25. 52.

    OPTIONS g r u n t . o p t

    i o n ( ' e n v ' ) ; g r u n t . o p t i o n . f l a g s ( ) ;
  26. 54.

    Make it part of configuration object, configure per target Add

    it to package.json Pass as arguments Pass as options
  27. 56.

    v a r d o n e = t h

    i s . a s y n c ( ) ; d o n e ( ) ;
  28. 58.

    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 ) { g r u n t . r e g i s t e r M u l t i T a s k ( ) { } } g r u n t . t a s k . l o a d T a s k s ( ' t a s k s ' ) ;
  29. 60.

    g r u n t . i n i t

    C o n f i g ( { w a t c h : { m a i n : { f i l e s : [ ' j a d e / * ' , ' G r u n t f i l e . j s ' , ' j s / r e v e a l . j s ' , ' c s s / r e v e a l . t a s k s : ' d e f a u l t ' } , t h e m e : { f i l e s : [ ' c s s / t h e m e / s o u r c e / * . s c s s ' , ' c s s / t h e m e / t e m p l a t e / * . s c s s ' t a s k s : ' t h e m e s ' } } } ) ;
  30. 61.
  31. 62.

    g r u n t . i n i t

    C o n f i g ( { j a d e : { h t m l : { o p t i o n s : { c l i e n t : f a l s e , p r e t t y : t r u e } } } } ) ;
  32. 63.
  33. 64.

    COMPACT FORMAT g r u n t . i n

    i t C o n f i g ( { c o n c a t : { o n e : { s r c : [ ' s r c / b b . j s ' , ' s r c / b b b . j s ' ] , d e s t : ' d e s t / b . j s ' , } , } , } ) ;
  34. 65.

    FILE OBJECT FORMAT g r u n t . i

    n i t C o n f i g ( { c a t : { o n e : { f i l e s : { ' d e s t / a . j s ' : [ ' s r c / a a . j s ' , ' s r c / a a a . j s ' ] , ' d e s t / a 1 . j s ' : [ ' s r c / a a 1 . j s ' , ' s r c / a a a 1 . j s ' ] , } } } } ) ;
  35. 66.

    FILE ARRAY FORMAT g r u n t . i

    n i t C o n f i g ( { c a t : { o n e : { f i l e s : [ { s r c : [ ' s r c / a a . j s ' , ' s r c / a a a . j s ' ] , d e s t : ' d e s t / a . j s ' } , { s r c : [ ' s r c / a a 1 . j s ' , ' s r c / a a a 1 . j s ' ] , d e s t : ' d e s t / a 1 . j s ' } ] , } } } ) ;
  36. 67.

    OTHER FILE ATTRIBUTES f i l t e r e

    x p a n d d o t gruntjs.com/configuring-tasks
  37. 68.

    FILE ARRAY FORMAT t h i s . f i

    l e s . f o r E a c h ( f u n c t i o n ( f i l e ) { v a r o u t p u t = f i l e . s r c . m a p ( f u n c t i o n ( f i l e p a t h ) { r e t u r n g r u n t . f i l e . r e a d ( f i l e p a t h ) ; } ) . j o i n ( ' \ n ' ) ; g r u n t . f i l e . w r i t e ( f i l e . d e s t , o u t p u t ) ; } ) ;
  38. 69.

    SO? Know not all attributes are created equal Only use

    “magic attributes” for their magic
  39. 72.

    Use `jade` Use `sass` Have a `package.json` Have an `index.html`

    ready Have `jQuery` ready to use Serve files from a server in case I want to do GET requests Watch for changes in jade/sass to automatically compile Live reload the page served on changes
  40. 73.

    Add a `README.md` Add `.gitignore` to not track compiled files/node

    modules Add `.jshintrc` for linting configuration Add `.gitattributes` to prevent line ending troubles
  41. 75.

    n p m i n s t a l l

    - g g r u n t - i n i t
  42. 77.
  43. 78.

    g i t c l o n e g i

    t @ g i t h u b . c o m : t o o n k e t e l s / g r u n t - i n i t - t k - f r o n t . g i t ~ / . g r u n t
  44. 79.

    g r u n t - i n i t

    g r u n t - i n i t t k - f r o n t
  45. 80.
  46. 81.

    ~ / . g r u n t - i

    n i t / d e f a u l t s . j s o n
  47. 83.

    m y - t e m p l a t

    e / t e m p l a t e . j s m y - t e m p l a t e / r e n a m e . j s o n m y - t e m p l a t e / r o o t /
  48. 84.
  49. 88.
  50. 90.

    HOW TO USE GRUNT? Installing All we need to know

    to use Grunt Tasks deep dive Magic config attributes Project scaffolding
  51. 92.

    THANKS ANTHONY RINGOET - TOON KETELS - Grab the from

    github @mylittletony @toonketels demo code
  52. 93.