Introducing Grunt.js, the JavaScript Task Runner

Slide 1

Slide 1 text

GRUNT.JS THE JAVASCRIPT TASK RUNNER Created by Presented by & @toonketels Anthony Ringoet Toon Ketels

Slide 2

Slide 2 text

OVERVIEW What is grunt? Why use grunt? How to use Grunt?

Slide 3

Slide 3 text

HOW TO USE GRUNT? Installing All we need to know to use Grunt Tasks deep dive Magic config attributes Project scaffolding

Slide 4

Slide 4 text

WHAT? GRUNT IN A NUTSHELL

Slide 5

Slide 5 text

GRUNT IN A NUTSHELL Javascript task runner Runs on command line Runs on node.js Rich plugin system with npm

Slide 6

Slide 6 text

g r u n t b u i l d : d e v

Slide 7

Slide 7 text

WHY? WHY USE TASK RUNNERS... WHY GRUNT?

Slide 8

Slide 8 text

WHY A TASK RUNNER?

Slide 9

Slide 9 text

hmmm... me “ Invest time once up front to do the right thing, consistently do the right thing without any time cost.”

Slide 10

Slide 10 text

Why use make - Mike Bostock “ Create machine-readable documentation that make your workflow reproducible.”

Slide 11

Slide 11 text

WHY A JAVASCRIPT TASK RUNNER?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

So we can use npm

Slide 14

Slide 14 text

WHY GRUNT?

Slide 15

Slide 15 text

REQUIREMENTS 1. Don't want to write all code myself 2. Easy to use 3. Future proof 4. Everybody else uses it

Slide 16

Slide 16 text

DON'T WANT TO WRITE ALL CODE MYSELF npm modules as grunt plugins

Slide 17

Slide 17 text

EASY TO USE Great (documented) API, great docs, great plugins to read the source from, posts, presentations...

Slide 18

Slide 18 text

FUTURE PROOF Momentum Roadmap Great people Great open-source projects and organizations

Slide 19

Slide 19 text

EVERYBODY IS USING IT We're working on that!

Slide 20

Slide 20 text

SO WHY AGAIN?

Slide 21

Slide 21 text

Faster Better More fun

Slide 22

Slide 22 text

HOW? LET GRUNT DO THE GRUNTWORK

Slide 23

Slide 23 text

ACT 1 Installing Grunt

Slide 24

Slide 24 text

DEPENDENCIES node.js npm

Slide 25

Slide 25 text

GRUNT grunt & grunt-cli

Slide 26

Slide 26 text

n p m i n s t a l l - g g r u n t - c l i

Slide 27

Slide 27 text

ACT 2 All we need to know to use Grunt

Slide 28

Slide 28 text

p a c k a g e . j s o n G r u n t f i l e . j s

Slide 29

Slide 29 text

PACKAGE.JSON

Slide 30

Slide 30 text

n p m i n s t a l l g r u n t - - s a v e - d e v

Slide 31

Slide 31 text

GRUNTFILE.JS

Slide 32

Slide 32 text

3 PARTS 1. Configuring tasks 2. Loading plugins and tasks 3. Defining task aliases and custom tasks

Slide 33

Slide 33 text

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 ) { }

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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 ' ) ;

Slide 36

Slide 36 text

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 ] ) ;

Slide 37

Slide 37 text

EXECUTE TASKS

Slide 38

Slide 38 text

g r u n t

Slide 39

Slide 39 text

g r u n t j a d e : d e v

Slide 40

Slide 40 text

g r u n t - h

Slide 41

Slide 41 text

THAT'S ALL THERE IS TO IT

Slide 42

Slide 42 text

ACT 3 Tasks deep dive

Slide 43

Slide 43 text

TYPES OF TASKS

Slide 44

Slide 44 text

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 ] ) ;

Slide 45

Slide 45 text

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 ) ;

Slide 46

Slide 46 text

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 ) ;

Slide 47

Slide 47 text

ACCESS DATA FROM WITHIN TASK

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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 ] }

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

PACKAGE INFO g r u n t . c o n f i g . g e t ( ' p k g ' ) ;

Slide 52

Slide 52 text

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 ( ) ;

Slide 53

Slide 53 text

PASS INFO TO TASK

Slide 54

Slide 54 text

Make it part of configuration object, configure per target Add it to package.json Pass as arguments Pass as options

Slide 55

Slide 55 text

ASYNC TASKS

Slide 56

Slide 56 text

v a r d o n e = t h i s . a s y n c ( ) ; d o n e ( ) ;

Slide 57

Slide 57 text

REFACTOR, LOAD TASKS FROM OWN FILES

Slide 58

Slide 58 text

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 ' ) ;

Slide 59

Slide 59 text

ACT 4 Magic config attributes

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

OPTIONS

Slide 62

Slide 62 text

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 } } } } ) ;

Slide 63

Slide 63 text

FILES

Slide 64

Slide 64 text

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 ' , } , } , } ) ;

Slide 65

Slide 65 text

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 ' ] , } } } } ) ;

Slide 66

Slide 66 text

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 ' } ] , } } } ) ;

Slide 67

Slide 67 text

OTHER FILE ATTRIBUTES f i l t e r e x p a n d d o t gruntjs.com/configuring-tasks

Slide 68

Slide 68 text

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 ) ; } ) ;

Slide 69

Slide 69 text

SO? Know not all attributes are created equal Only use “magic attributes” for their magic

Slide 70

Slide 70 text

ACT 5 Project scaffolding

Slide 71

Slide 71 text

START NEW PROJECT...

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

GRUNT-INIT

Slide 75

Slide 75 text

n p m i n s t a l l - g g r u n t - i n i t

Slide 76

Slide 76 text

PROJECT TEMPLATES

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

PROMPT

Slide 81

Slide 81 text

~ / . g r u n t - i n i t / d e f a u l t s . j s o n

Slide 82

Slide 82 text

CREATE YOUR OWN

Slide 83

Slide 83 text

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 /

Slide 84

Slide 84 text

ROOT

Slide 85

Slide 85 text

RENAME.JSON

Slide 86

Slide 86 text

TEMPLATE.JS

Slide 87

Slide 87 text

SCAFFOLDING Not just for js projects.

Slide 88

Slide 88 text

RECAP

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

HOW TO USE GRUNT? Installing All we need to know to use Grunt Tasks deep dive Magic config attributes Project scaffolding

Slide 91

Slide 91 text

Q&A QUESTIONS...

Slide 92

Slide 92 text

THANKS ANTHONY RINGOET - TOON KETELS - Grab the from github @mylittletony @toonketels demo code

Slide 93

Slide 93 text

No content