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
   

   View Slide

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

   View Slide

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

   View Slide

4. WHAT?
   GRUNT IN A NUTSHELL
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. WHY A TASK RUNNER?
   

   View Slide

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

   View Slide

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

    View Slide

11. WHY A JAVASCRIPT TASK RUNNER?
    

    View Slide

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

    View Slide

13. So we can use npm
    

    View Slide

14. WHY GRUNT?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. SO WHY AGAIN?
    

    View Slide

21. Faster
    Better
    More fun
    

    View Slide

22. HOW?
    LET GRUNT DO THE GRUNTWORK
    

    View Slide

23. ACT 1
    Installing Grunt
    

    View Slide

24. DEPENDENCIES
    node.js
    npm
    

    View Slide

25. GRUNT
    grunt & grunt-cli
    

    View Slide

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

    View Slide

27. ACT 2
    All we need to know to use Grunt
    

    View Slide

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

    View Slide

29. PACKAGE.JSON
    

    View Slide

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

    View Slide

31. GRUNTFILE.JS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. EXECUTE TASKS
    

    View Slide

38. g
    r
    u
    n
    t
    

    View Slide

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

    View Slide

40. g
    r
    u
    n
    t -
    h
    

    View Slide

41. THAT'S ALL THERE IS TO IT
    

    View Slide

42. ACT 3
    Tasks deep dive
    

    View Slide

43. TYPES OF TASKS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. ACCESS DATA FROM WITHIN TASK
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. PASS INFO TO TASK
    

    View Slide

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

    View Slide

55. ASYNC TASKS
    

    View Slide

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

    View Slide

57. REFACTOR, LOAD TASKS FROM OWN FILES
    

    View Slide

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

    View Slide

59. ACT 4
    Magic config attributes
    

    View Slide

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

    View Slide

61. OPTIONS
    

    View Slide

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

    View Slide

63. FILES
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

70. ACT 5
    Project scaffolding
    

    View Slide

71. START NEW PROJECT...
    

    View Slide

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
    

    View Slide

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
    

    View Slide

74. GRUNT-INIT
    

    View Slide

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

    View Slide

76. PROJECT TEMPLATES
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

80. PROMPT
    

    View Slide

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

    View Slide

82. CREATE YOUR OWN
    

    View Slide

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
    /
    

    View Slide

84. ROOT
    

    View Slide

85. RENAME.JSON
    

    View Slide

86. TEMPLATE.JS
    

    View Slide

87. SCAFFOLDING
    Not just for js projects.
    

    View Slide

88. RECAP
    

    View Slide

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

    View Slide

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

    View Slide

91. Q&A
    QUESTIONS...
    

    View Slide

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

    View Slide

93. View Slide