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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. WHAT?
    GRUNT IN A NUTSHELL

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. WHY A TASK RUNNER?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. WHY A JAVASCRIPT TASK RUNNER?

    View full-size slide

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

    View full-size slide

  13. So we can use npm

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. SO WHY AGAIN?

    View full-size slide

  20. Faster
    Better
    More fun

    View full-size slide

  21. HOW?
    LET GRUNT DO THE GRUNTWORK

    View full-size slide

  22. ACT 1
    Installing Grunt

    View full-size slide

  23. DEPENDENCIES
    node.js
    npm

    View full-size slide

  24. GRUNT
    grunt & grunt-cli

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. PACKAGE.JSON

    View full-size slide

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

    View full-size slide

  30. GRUNTFILE.JS

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. EXECUTE TASKS

    View full-size slide

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

    View full-size slide

  38. THAT'S ALL THERE IS TO IT

    View full-size slide

  39. ACT 3
    Tasks deep dive

    View full-size slide

  40. TYPES OF TASKS

    View full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

  44. ACCESS DATA FROM WITHIN TASK

    View full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. PASS INFO TO TASK

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. REFACTOR, LOAD TASKS FROM OWN FILES

    View full-size slide

  54. 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 full-size slide

  55. ACT 4
    Magic config attributes

    View full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

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

    View full-size slide

  62. 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 full-size slide

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

    View full-size slide

  64. ACT 5
    Project scaffolding

    View full-size slide

  65. START NEW PROJECT...

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

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

    View full-size slide

  69. PROJECT TEMPLATES

    View full-size slide

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

    View full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

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

    View full-size slide

  74. CREATE YOUR OWN

    View full-size slide

  75. 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 full-size slide

  76. SCAFFOLDING
    Not just for js projects.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  79. Q&A
    QUESTIONS...

    View full-size slide

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

    View full-size slide