Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Toon Ketels

May 15, 2013
Tweet

More Decks by Toon Ketels

Other Decks in Programming

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