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

Gulp and Grunt

Gulp and Grunt

Big Gulp! Task Automation with Gulp, Node and JavaScript

by John Papa

Are you interested in learning how to automate your testing and build tasks? Let's explore how gulp works on node.js to automate previously manual tasks using JavaScript. You'll learn when and where gulp is appropriate, how it compares to grunt, where gulp adds value, and how it can automate monotonous yet critical workflow.

https://github.com/johnpapa/ng-demos/tree/master/grunt-gulp

John Papa

April 15, 2014
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. @john_papa  
    grunt and gulp
    JOHN PAPA

    View Slide

  2. JavaScript
    Task
    Runners
    @john_papa  

    View Slide

  3. @john_papa  
    Why use a task runner ?
    Automation

    View Slide

  4. @john_papa  
    Repeating the same mistakes gets old

    View Slide

  5. @john_papa  
    What’s in it for you?
    Improve quality
    Deliver faster
    Repeatable / Consistent

    View Slide

  6. @john_papa  
    Automate tasks you don’t want to do
      Code  quality  
      Minifying  
      Run  tests  

    View Slide

  7. @john_papa  
    Work smarter, not harder

    View Slide

  8. @john_papa  
    What are gulp and grunt?
      Build  automa:on  tools  
      Alleviates  cri:cal  but  monotonous  work  
      Frees  up  your  :me!  

    View Slide

  9. @john_papa  
    How are they different ?
      Code  over  configura:on  
      Stream  based  
      Configura:on  over  code  
      File  based  

    View Slide

  10. @john_papa  
    How would you create this workflow?
      Get  files  
      Modify  them    
      Make  new  ones  

    View Slide

  11. @john_papa  
    typical grunt task
    Modify  
    File  
    System  
    Temp  
    Read  
    Files  
    Write  
    Files  
    Modify  
    Temp  
    Read  
    Files  
    Write  
    Files  
    Modify  
    Temp  
    Read  
    Files  
    Write  
    Files  

    View Slide

  12. @john_papa  
    gulp uses streams
    Modify   Modify   Modify  
    File  System   File  System  
    Read  
    Files  
    Write  
    Files  

    View Slide

  13. Task
    automation
    with gulp
    Coding  with  streams  

    View Slide

  14. @john_papa  
    Before you begin
      Download  &  install  node.js    
    ◦ hMp://nodejs.org    
      Install  globally  (run  from  any  path)  

    View Slide

  15. @john_papa  
    gulp in a nutshell
    Install  gulp  
    globally  
    1
    Create  
    package  
    file  
    2
    Install  
    dependent  
    packages  
    3
    Code  your  
    tasks  in  
    gulpfile.js  
    4
    Load  tasks  
    into  gulp  
    5

    View Slide

  16. @john_papa  
    Create package.json file
      Prompts  you  for  author,  package  name,  and  basics  

    View Slide

  17. @john_papa  
    Install gulp locally to the package
    -­‐-­‐save-­‐dev    
    is  for  development  
    -­‐-­‐save    
    is  for  produc:on  

    View Slide

  18. @john_papa  
    Installing package dependencies
    Combine  
    files  into  1  
    Minify  
    files  
    Verify  
    code  
    quality  

    View Slide

  19. @john_papa  
    package.json to manage dependencies

    View Slide

  20. @john_papa  
    Good news! Only 4 simple APIs

    View Slide

  21. @john_papa  
    1. gulp.task ( name, [dep], fn)
      Registers  a  task  name  with  a  func:on  
      Op:onally  declare  dependencies  

    View Slide

  22. @john_papa  
    2. gulp.src ( glob )
      Takes  a  file  system  glob  (set  of  files)    
      Emits  files  that  match  

    View Slide

  23. @john_papa  
    3. gulp.dest ( folder )
      Piped  files  are  wriMen  to  the  file  system  

    View Slide

  24. @john_papa  
    4. gulp.watch ( glob, fn )
      Run  a  func:on  when  the  glob  changes  

    View Slide

  25. @john_papa  
    You are a gulp expert!
      task  
      src  
      dest  
      watch  

    View Slide

  26. @john_papa  
    gulpfile.js
      Your  code  defining  your  tasks  
      Loads  the  plugins  

    View Slide

  27. @john_papa  
    gulpfile.js

    View Slide

  28. @john_papa  
    Running gulp
      From  terminal  or  command  prompt    

    View Slide

  29. @john_papa  
    Task dependencies run in parallel

    View Slide

  30. @john_papa  
    Task dependency chains

    View Slide

  31. gulp demo

    View Slide

  32. Task
    automation
    with grunt
    Configura:on    
    over  code  

    View Slide

  33. @john_papa  
    How are they different ?
      Code  over  configura:on  
      Configura:on  over  code  

    View Slide

  34. @john_papa  
    Before you begin
      Download  &  install  node.js    
    ◦ hMp://nodejs.org    
      Install  globally  (run  from  any  path)  

    View Slide

  35. @john_papa  
    grunt in a nutshell
    Install  CLI  
    1
    Create  
    package  
    file  
    2
    Install  
    dependent  
    packages  
    3
    Configure  
    tasks  in  
    grun`ile.js  
    4
    Load  tasks  
    into  grunt  
    5
    Register  
    custom  
    tasks  
    6

    View Slide

  36. @john_papa  
    Create package.json file
      Prompts  you  for    
    ◦ author  
    ◦ package  name  
    ◦ basics  

    View Slide

  37. @john_papa  
    Install grunt locally to the package

    View Slide

  38. @john_papa  
    Installing package dependencies
    Install  1  or  
    more  

    View Slide

  39. @john_papa  
    package.json to manage dependencies

    View Slide

  40. @john_papa  
    gruntfile.js
      Your  task  configura:on  
      JSON  style  
      Loads  the  plugins  

    View Slide

  41. @john_papa  
    grunt 101
      grunt  wrapper  
      Task  configura:on  
      Loading  tasks  
      Register  custom  tasks  
      Organiza:on  :ps  

    View Slide

  42. @john_papa  
    grunt wrapper

    View Slide

  43. @john_papa  
    Task configuration

    View Slide

  44. @john_papa  
    gruntfile.js

    View Slide

  45. @john_papa  
    Load tasks
    Load  npm  
    tasks  into  
    grunt  
    Task  
    names  

    View Slide

  46. @john_papa  
    Custom tasks
    Custom  
    task  name  
    Tasks  to  
    run  

    View Slide

  47. @john_papa  
    Running grunt
      From  terminal  or  command  prompt    

    View Slide

  48. @john_papa  
    Massive
    gruntfile.js
    is a common
    problem

    View Slide

  49. @john_papa  
    Stop config from getting out of hand

    View Slide

  50. @john_papa  
    Organize into config files

    View Slide

  51. grunt or gulp ?
    Choose  1,  
    not  both  

    View Slide

  52. @john_papa  
      Configura:on  over  code  
      File  based  
      2400+  packages  
      <  2  years  old  
      Very  widely  used  
     
      Code  over  configura:on  
      Stream  based  
      400+  packages  
      <  1  year  old  
      Rising  rapidly  

    View Slide

  53. @john_papa  
    Choose whichever is easier to read
    and write

    View Slide

  54. @john_papa  
    Demo
      Crea:ng  a  project  from  code  
      hMps://github.com/johnpapa/ng-­‐demos    

    View Slide

  55. @john_papa  
    Resources
      node.js    hMp://nodejs.org  
      gulp  hMp://gulpjs.com    
      grunt  hMp://gruntjs.com    
      Sample  code  
    ◦ hMps://github.com/johnpapa/ng-­‐demos/grunt-­‐gulp      

    View Slide