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. GRUNT.JS THE JAVASCRIPT TASK RUNNER Created by Presented by &

    @toonketels Anthony Ringoet Toon Ketels
  2. OVERVIEW What is grunt? Why use grunt? How to use

    Grunt?
  3. HOW TO USE GRUNT? Installing All we need to know

    to use Grunt Tasks deep dive Magic config attributes Project scaffolding
  4. WHAT? GRUNT IN A NUTSHELL

  5. GRUNT IN A NUTSHELL Javascript task runner Runs on command

    line Runs on node.js Rich plugin system with npm
  6. g r u n t b u i l d

    : d e v
  7. WHY? WHY USE TASK RUNNERS... WHY GRUNT?

  8. WHY A TASK RUNNER?

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

    the right thing, consistently do the right thing without any time cost.”
  10. Why use make - Mike Bostock “ Create machine-readable documentation

    that make your workflow reproducible.”
  11. WHY A JAVASCRIPT TASK RUNNER?

  12. Invite front-end devs g r u n t - h

  13. So we can use npm

  14. WHY GRUNT?

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

    Easy to use 3. Future proof 4. Everybody else uses it
  16. DON'T WANT TO WRITE ALL CODE MYSELF npm modules as

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

    to read the source from, posts, presentations...
  18. FUTURE PROOF Momentum Roadmap Great people Great open-source projects and

    organizations
  19. EVERYBODY IS USING IT We're working on that!

  20. SO WHY AGAIN?

  21. Faster Better More fun

  22. HOW? LET GRUNT DO THE GRUNTWORK

  23. ACT 1 Installing Grunt

  24. DEPENDENCIES node.js npm

  25. GRUNT grunt & grunt-cli

  26. n p m i n s t a l l

    - g g r u n t - c l i
  27. ACT 2 All we need to know to use Grunt

  28. p a c k a g e . j s

    o n G r u n t f i l e . j s
  29. PACKAGE.JSON

  30. n p m i n s t a l l

    g r u n t - - s a v e - d e v
  31. GRUNTFILE.JS

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

    3. Defining task aliases and custom tasks
  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 ) { }
  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 ' ) , / / . . . } ) ;
  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 ' ) ;
  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 ] ) ;
  37. EXECUTE TASKS

  38. g r u n t

  39. g r u n t j a d e :

    d e v
  40. g r u n t - h

  41. THAT'S ALL THERE IS TO IT

  42. ACT 3 Tasks deep dive

  43. TYPES OF TASKS

  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 ] ) ;
  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 ) ;
  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 ) ;
  47. ACCESS DATA FROM WITHIN TASK

  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
  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 ] }
  50. CONFIG g r u n t . c o n

    f i g . g e t ( t h i s . n a m e ) ;
  51. PACKAGE INFO g r u n t . c o

    n f i g . g e t ( ' p k g ' ) ;
  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 ( ) ;
  53. PASS INFO TO TASK

  54. Make it part of configuration object, configure per target Add

    it to package.json Pass as arguments Pass as options
  55. ASYNC TASKS

  56. v a r d o n e = t h

    i s . a s y n c ( ) ; d o n e ( ) ;
  57. REFACTOR, LOAD TASKS FROM OWN FILES

  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 ' ) ;
  59. ACT 4 Magic config attributes

  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 ' } } } ) ;
  61. OPTIONS

  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 } } } } ) ;
  63. FILES

  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 ' , } , } , } ) ;
  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 ' ] , } } } } ) ;
  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 ' } ] , } } } ) ;
  67. OTHER FILE ATTRIBUTES f i l t e r e

    x p a n d d o t gruntjs.com/configuring-tasks
  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 ) ; } ) ;
  69. SO? Know not all attributes are created equal Only use

    “magic attributes” for their magic
  70. ACT 5 Project scaffolding

  71. START NEW PROJECT...

  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
  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
  74. GRUNT-INIT

  75. n p m i n s t a l l

    - g g r u n t - i n i t
  76. PROJECT TEMPLATES

  77. ~ / . g r u n t - i

    n i t /
  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
  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
  80. PROMPT

  81. ~ / . g r u n t - i

    n i t / d e f a u l t s . j s o n
  82. CREATE YOUR OWN

  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 /
  84. ROOT

  85. RENAME.JSON

  86. TEMPLATE.JS

  87. SCAFFOLDING Not just for js projects.

  88. RECAP

  89. What is grunt? Why use grunt? How to use Grunt?

  90. HOW TO USE GRUNT? Installing All we need to know

    to use Grunt Tasks deep dive Magic config attributes Project scaffolding
  91. Q&A QUESTIONS...

  92. THANKS ANTHONY RINGOET - TOON KETELS - Grab the from

    github @mylittletony @toonketels demo code
  93. None