Tweet
Tweet

Slide 1

Slide 1 text

@john_papa   grunt and gulp JOHN PAPA

Slide 2

Slide 2 text

JavaScript Task Runners @john_papa  

Slide 3

Slide 3 text

@john_papa   Why use a task runner ? Automation

Slide 4

Slide 4 text

@john_papa   Repeating the same mistakes gets old

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@john_papa   Work smarter, not harder

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@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  

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Task automation with gulp Coding  with  streams  

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@john_papa   package.json to manage dependencies

Slide 20

Slide 20 text

@john_papa   Good news! Only 4 simple APIs

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

@john_papa   gulpfile.js

Slide 28

Slide 28 text

@john_papa   Running gulp   From  terminal  or  command  prompt    

Slide 29

Slide 29 text

@john_papa   Task dependencies run in parallel

Slide 30

Slide 30 text

@john_papa   Task dependency chains

Slide 31

Slide 31 text

gulp demo

Slide 32

Slide 32 text

Task automation with grunt Configura:on     over  code  

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@john_papa   Install grunt locally to the package

Slide 38

Slide 38 text

@john_papa   Installing package dependencies Install  1  or   more  

Slide 39

Slide 39 text

@john_papa   package.json to manage dependencies

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

@john_papa   grunt wrapper

Slide 43

Slide 43 text

@john_papa   Task configuration

Slide 44

Slide 44 text

@john_papa   gruntfile.js

Slide 45

Slide 45 text

@john_papa   Load tasks Load  npm   tasks  into   grunt   Task   names  

Slide 46

Slide 46 text

@john_papa   Custom tasks Custom   task  name   Tasks  to   run  

Slide 47

Slide 47 text

@john_papa   Running grunt   From  terminal  or  command  prompt    

Slide 48

Slide 48 text

@john_papa   Massive gruntfile.js is a common problem

Slide 49

Slide 49 text

@john_papa   Stop config from getting out of hand

Slide 50

Slide 50 text

@john_papa   Organize into config files

Slide 51

Slide 51 text

grunt or gulp ? Choose  1,   not  both  

Slide 52

Slide 52 text

@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  

Slide 53

Slide 53 text

@john_papa   Choose whichever is easier to read and write

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

@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