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.


John Papa

April 15, 2014

More Decks by John Papa

Other Decks in Technology


  1. @john_papa   grunt and gulp JOHN PAPA

  2. JavaScript Task Runners @john_papa  

  3. @john_papa   Why use a task runner ? Automation

  4. @john_papa   Repeating the same mistakes gets old

  5. @john_papa   What’s in it for you? Improve quality Deliver

    faster Repeatable / Consistent
  6. @john_papa   Automate tasks you don’t want to do   Code

     quality     Minifying     Run  tests  
  7. @john_papa   Work smarter, not harder

  8. @john_papa   What are gulp and grunt?   Build  automa:on  tools

        Alleviates  cri:cal  but  monotonous  work     Frees  up  your  :me!  
  9. @john_papa   How are they different ?   Code  over  configura:on

        Stream  based     Configura:on  over  code     File  based  
  10. @john_papa   How would you create this workflow?   Get  files

        Modify  them       Make  new  ones  
  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  
  12. @john_papa   gulp uses streams Modify   Modify   Modify

      File  System   File  System   Read   Files   Write   Files  
  13. Task automation with gulp Coding  with  streams  

  14. @john_papa   Before you begin   Download  &  install  node.js  

      ◦ hMp://nodejs.org       Install  globally  (run  from  any  path)  
  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
  16. @john_papa   Create package.json file   Prompts  you  for  author,  package

     name,  and  basics  
  17. @john_papa   Install gulp locally to the package -­‐-­‐save-­‐dev  

      is  for  development   -­‐-­‐save     is  for  produc:on  
  18. @john_papa   Installing package dependencies Combine   files  into  1

      Minify   files   Verify   code   quality  
  19. @john_papa   package.json to manage dependencies

  20. @john_papa   Good news! Only 4 simple APIs

  21. @john_papa   1. gulp.task ( name, [dep], fn)   Registers  a

     task  name  with  a  func:on     Op:onally  declare  dependencies  
  22. @john_papa   2. gulp.src ( glob )   Takes  a  file

     system  glob  (set  of  files)       Emits  files  that  match  
  23. @john_papa   3. gulp.dest ( folder )   Piped  files  are

     wriMen  to  the  file  system  
  24. @john_papa   4. gulp.watch ( glob, fn )   Run  a

     func:on  when  the  glob  changes  
  25. @john_papa   You are a gulp expert!   task     src

        dest     watch  
  26. @john_papa   gulpfile.js   Your  code  defining  your  tasks     Loads

     the  plugins  
  27. @john_papa   gulpfile.js

  28. @john_papa   Running gulp   From  terminal  or  command  prompt  

  29. @john_papa   Task dependencies run in parallel

  30. @john_papa   Task dependency chains

  31. gulp demo

  32. Task automation with grunt Configura:on     over  code  

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

        Configura:on  over  code  
  34. @john_papa   Before you begin   Download  &  install  node.js  

      ◦ hMp://nodejs.org       Install  globally  (run  from  any  path)  
  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
  36. @john_papa   Create package.json file   Prompts  you  for    

    ◦ author   ◦ package  name   ◦ basics  
  37. @john_papa   Install grunt locally to the package

  38. @john_papa   Installing package dependencies Install  1  or   more

  39. @john_papa   package.json to manage dependencies

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

      Loads  the  plugins  
  41. @john_papa   grunt 101   grunt  wrapper     Task  configura:on  

      Loading  tasks     Register  custom  tasks     Organiza:on  :ps  
  42. @john_papa   grunt wrapper

  43. @john_papa   Task configuration

  44. @john_papa   gruntfile.js

  45. @john_papa   Load tasks Load  npm   tasks  into  

    grunt   Task   names  
  46. @john_papa   Custom tasks Custom   task  name   Tasks

     to   run  
  47. @john_papa   Running grunt   From  terminal  or  command  prompt  

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

  49. @john_papa   Stop config from getting out of hand

  50. @john_papa   Organize into config files

  51. grunt or gulp ? Choose  1,   not  both  

  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  
  53. @john_papa   Choose whichever is easier to read and write

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

  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