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

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