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.

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