広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』

広島フロントエンド勉強会 Vol.18のスライド

Transcript

1. HVMQͷجຊͱHVMQ Ҫ্
   ୓
2. Ҫ্
   ୓
   ϑΝφϑΣΫτגࣜձࣾ
   ϑϩϯτΤϯυΤϯδχΞ
   ޿ౡϑϩϯτΤϯυษڧձ
   ओ࠵
   ओ৯͸ोͳ͠୲ʑ໙
   ່͔Θ͍͍
   ࠊ௧͍
3. HVMQKTͱ͸
4. HVMQKTͱ͸ w /PEFKTͷ4USFBN"1*Λ࢖ͬͨϏϧυγεςϜ
   w ઃఆΛ+BWB4DSJQUͰॻ͘
   w ඇಉظͰฒྻॲཧΛߦ͏ ൥ࡶͳॲཧΛࣗಈԽ͢ΔʮϏϧυγεςϜʯ
5. HVMQKTͰ͖Δ͜ͱ w )5.-
   w 4BTT
   w ϕϯμʔϓϨϑΟοΫε
   w ίϯύΠϧ
   w +BWB4DSJQU
   w ѹॖ
   w ϒϥ΢βͷϦϩʔυ XFCαΠτͷίʔσΟϯάʹ͸޻ఔ͕ͨ͘͞Μ
6. HVMQKTͷಋೖ
7. Πϯετʔϧ /PEFKTͷΠϯετʔϧ IUUQOPEFKTKQOPEFKTPSH@KBEPDTW
8. ࠇ͍ը໘
9. OQN
   JOJU ύοέʔδ؅ཧ
   QSPKFDUͷॳظઃఆΛߦ͏ 
   OQN
   JOJU
   Z ϓϩδΣΫτΛڞ༗ͨ͠৔߹ͳͲʹ 
   OQN
   JOTUBMM ࠓͷOQNͷ؀ڥ͕ἧ͏
10. Πϯετʔϧ HVMQKTͷΠϯετʔϧ 
    TVEP
    OQN
    JOTUBMM
    H
    HVMQDMJ 
    OQN
    JOTUBMM
    %
    HVMQ άϩʔόϧΠϯετʔϧ ϩʔΧϧΠϯετʔϧ
11. HVMQpMFKT
12. 4BTTͷίϯύΠϧ HVMQTBTTͷΠϯετʔϧ 
    OQN
    JOTUBMM
    %
    HVMQTBTT
13. HVMQpMFKT
14. HVMQpMFKT HVMQpMFKTͷجຊܗ HVMQUBTL bλεΫ໊
    
    \
    HVMQTSD ಡΈࠐΈΉϑΝΠϧ
    
    ʙॲཧʙ
    QJQF HVMQEFTU ग़ྗ͢ΔσΟϨΫτϦ 
    ^ 
15. TBTTͷίϯύΠϧ
16. DPOTU
    HVMQ
    
    SFRVJSF HVMQ 
    DPOTU
    TBTT
    
    SFRVJSF HVMQTBTT  ࢖͏ϓϥάΠϯΛಡΈࠐΉ 4BTTͷίϯύΠϧ
17. HVMQUBTL bTBTT`
    
    
    \
    
    HVMQTSD TBTT TDTT
    
    QJQF TBTT
    
    QJQF HVMQEFTU DTT 
    ^  w TSD
    
    
    ʜ
    ಡΈࠐΉϑΝΠϧΛࢦఆ
    w QJQF
    ʜ
    ॲཧΛͭͳ͙
    w EFTU
    ʜ
    ϑΝΠϧͷग़ྗઌΛࢦఆ 4BTTΛίϯύΠϧ͢ΔλεΫ 4BTTͷίϯύΠϧ
18. HVMQUBTL bXBUDI
    
    
    \
    
    HVMQXBUDI
    
    
    
    
    
    TBTT TDTT
    <TBTT>
    
    
    
    
    
    ^  ؂ࢹ͢ΔσΟϨΫτϦΛઃఆ 4BTTͷίϯύΠϧ
19. HVMQUBTL bXBUDI
    
    
    \
    
    HVMQXBUDI
    
    
    
    
    
    TBTT TDTT
    <TBTT>
    
    
    
    
    
    ^  ؂ࢹ͢ΔσΟϨΫτϦΛઃఆ 4BTTͷίϯύΠϧ ؂ࢹ͢ΔσΟϨΫτϦ มߋ͕͋ͬͨ৔߹ͷλεΫ
20. w EFGBVMU
    ʜ
    λεΫ໊Λࢦఆͤͣʹ࣮ߦ͞Εͨ࣌ͷॲཧ HVMQUBTL EFGBVMU
    <XBUDI>  σϑΥϧτͰ࣮ߦ͢ΔλεΫΛ௥Ճ 4BTTͷίϯύΠϧ
21. ϕϯμʔϓϨϑΟοΫε
22. ϕϯμʔϓϨϑΟοΫεͷ෇༩ HVMQBVUPQSFpYFSͷΠϯετʔϧ 
    OQN
    JOTUBMM
    %
    HVMQBVUPQSFpYFS w αϙʔτ͍ͨ͠ϒϥ΢βΛࢦఆ͠ɺඞཁͳϕϯμʔϓϨ ϑΟοΫεΛࣗಈͰ෇༩ͯ͘͠ΕΔ w $BO
    *
    VTF
    ʜ
    Λϕʔεʹ࡞ΒΕ͍ͯΔ
    w ϒϥ΢β΍όʔδϣϯΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ
23. DPOTU
    BVUPQSFpYFS
    
    SFRVJSF HVMQBVUPQSFpYFS  ࢖͏ϓϥάΠϯΛಡΈࠐΉ ϕϯμʔϓϨϑΟοΫεͷ෇༩
24. HVMQUBTL bTBTT
    
    
    \
    
    HVMQTSD TBTT TDTT
    
    QJQF TBTT
    
    QJQF BVUPQSFpYFS \
    CSPXTFST
    <MBTU
    
    WFSTJPOT>
    ^
    
    QJQF HVMQEFTU DTT 
    ^  4BTTͷλεΫʹ૊ΈࠐΉ ϕϯμʔϓϨϑΟοΫεͷ෇༩
25. Τϥʔͷ੍ޚ
26. Τϥʔͷ཈੍ HVMQQMVNCFSͷΠϯετʔϧ 
    OQN
    JOTUBMM
    %
    HVMQQMVNCFS w 4BTTͷίϯύΠϧ࣌ʹΤϥʔ͕͋ΔͱɺHVMQͷXBUDIࣗ ମ͕ࢭ·ͬͯ͠·͏ͷΛճආ
27. DPOTU
    QMVNCFS
    
    SFRVJSF HVMQQMVNCFS  ࢖͏ϓϥάΠϯΛಡΈࠐΉ Τϥʔͷ཈੍
28. HVMQUBTL bTBTT
    
    
    \
    
    HVMQTSD bTBTT TDTT
    ɹ
    QJQF QMVNCFS
    
    QJQF TBTT
    
    QJQF BVUPQSFpYFS
    
    QJQF HVMQEFTU DTT 
    ^  4BTTͷλεΫʹ૊ΈࠐΉ Τϥʔͷ཈੍
29. TPVSDFNBQ
30. TPVSDFNBQͷग़ྗ HVMQTPVSDFNBQTͷΠϯετʔϧ 
    OQN
    JOTUBMM
    %
    HVMQTPVSDFNBQT w TPVSDFNBQTΛग़ྗ͢Δ
31. DPOTU
    TPVSDFNBQT
    
    SFRVJSF HVMQTPVSDFNBQT  ࢖͏ϓϥάΠϯΛಡΈࠐΉ TPVSDFNBQͷग़ྗ
32. HVMQUBTL TBTT
    GVODUJPO \
    
    HVMQTSD bTBTT TDTT`
    
    
    
    
    QJQF TPVSDFNBQTJOJU
    ɹ
    QJQF QMVNCFS
    
    QJQF TBTT
    
    QJQF BVUPQSFpYFS
    
    
    
    
    QJQF TPVSDFNBQTXSJUF NBQ
    
    QJQF HVMQEFTU DTT 
    ^  4BTTͷλεΫʹ૊ΈࠐΉ TPVSDFNBQͷग़ྗ
33. ϒϥ΢βγϯΫ
34. ϒϥ΢βγϯΫ CSPXTFSTZODͷΠϯετʔϧ 
    OQN
    JOTUBMM
    %
    CSPXTFSTZOD w ࣗಈͰϒϥ΢βΛϦϩʔυͯ͘͠ΕΔ
    w ϩʔΧϧαʔόΛཱͯΔͷͰεϚϗͰ΋֬ೝ͕Ͱ͖Δ
    w ΋ͪΖΜεϚϗ΋Ϧϩʔυͯ͘͠ΕΔ
35. DPOTU
    CSPXTFS4ZOD
    
    SFRVJSF CSPXTFSTZOD DSFBUF  ࢖͏ϓϥάΠϯΛಡΈࠐΉ ϒϥ΢βγϯΫ
36. HVMQUBTL bCSPXTFSTZOD
    
    
    \
    
    CSPXTFS4ZODJOJU \
    
    
    TFSWFS
    \
    
    
    
    CBTF%JS
    IUEPDT
    
    
    ^
    
    ^ 
    ^  w CBTF%JS
    
    
    ʜ
    ج४ͱͳΔσΟϨΫτϦύε ϒϥ΢βγϯΫʹ࢖͏αʔόΛݐͯΔ ϒϥ΢βγϯΫ
37. HVMQUBTL CSPXTFSSFMPBE
    
    \
    
    
    CSPXTFS4ZODSFMPBE
    ^ w CBTF%JS
    
    
    ʜ
    ج४ͱͳΔσΟϨΫτϦύε ϒϥ΢βγϯΫͰϦϩʔυ͢ΔλεΫ ϒϥ΢βγϯΫ
38. HVMQUBTL XBUDI
    
    \
    ɹ
    HVMQXBUDI TDTT TDTT <TBTT>
    
    HVMQXBUDI bJOEFYIUNM` <CSPXTFSSFMPBE>
    ^ ϒϥ΢βγϯΫ
39. HVMQUBTL TBTT
    GVODUJPO \
    
    HVMQTSD bTBTT TDTT`
    
    
    
    
    QJQF TPVSDFNBQTJOJU
    ɹ
    QJQF QMVNCFS
    
    QJQF TBTT
    
    QJQF BVUPQSFpYFS
    
    
    
    
    QJQF TPVSDFNBQTXSJUF NBQ
    
    QJQF HVMQEFTU bDTT 
    
    
    
    
    QJQF CSPXTFS4ZODTUSFBN
    ^  ϒϥ΢βγϯΫ
40. HVMQUBTL EFGBVMU
    <CSPXTFSTZOD XBUDI>  σϑΥϧτͰ࣮ߦ͢ΔλεΫΛ௥Ճ σϑΥϧτ
41. HVMQ!
42. HVMQ!ͰมΘͬͨ͜ͱ w λεΫͷ௚ྻɾฒྻॲཧ
    w λεΫͷߏจ௥Ճ
    w λεΫ׬ྃ࣌ʹίʔϧόοΫؔ਺Λ࣮ߦ ओͳมߋ఺
43. 
    
    OQN
    JOTUBMM
    %
    HVMQ! HVMQ!ΛΠϯετʔϧ HVMQ!ͷΠϯετʔϧ
44. HVMQpMFKT HVMQpMFKTͷجຊܗ HVMQUBTL bλεΫ໊`
    ίʔϧόοΫؔ਺
    
    \
    HVMQTSD ಡΈࠐΈΉϑΝΠϧ
    
    ʙॲཧʙ
    QJQF HVMQEFTU ग़ྗ͢ΔσΟϨΫτϦ 
    ίʔϧόοΫؔ਺
    ^ 
45. ಉظɾඇಉظॲཧ HVMQQBSBMMFMͱHVMQTFSJFT HVMQUBTL bλεΫ໊`
    
    
    \
    HVMQTFSJFT
    HVMQQBSBMMFM bUBTL`
    bUBTL`
    bUBTL`
    
    ^ 
46. HVMQUBTL bTBTT`
    
    
    \
    
    HVMQTSD TBTT TDTT
    
    QJQF TBTT
    
    QJQF HVMQEFTU DTT 
    ^  4BTTΛίϯύΠϧ͢ΔλεΫ 4BTTͷίϯύΠϧ HVMQ!
47. HVMQUBTL bTBTT`
    EPOF
    
    \
    
    HVMQTSD TBTT TDTT
    
    QJQF TBTT
    
    QJQF HVMQEFTU bDTT` 
    
    
    
    
    EPOF
    ^  4BTTΛίϯύΠϧ͢ΔλεΫ 4BTTͷίϯύΠϧ HVMQ!
48. HVMQUBTL bXBUDI
    
    
    \
    
    HVMQXBUDI
    
    
    
    
    
    TBTT TDTT
    <TBTT>
    
    
    
    
    
    ^  ؂ࢹ͢ΔσΟϨΫτϦΛઃఆ 4BTTͷίϯύΠϧ HVMQ!
49. HVMQUBTL bXBUDI
    
    
    \
    
    HVMQXBUDI
    
    
    
    
    
    TBTT TDTT
    HVMQTFSJFT bTBTT
    MPH 
    
    
    
    
    
    ^  ؂ࢹ͢ΔσΟϨΫτϦΛઃఆ 4BTTͷίϯύΠϧ HVMQ!
50. HVMQUBTL EFGBVMU
    <XBUDI>  σϑΥϧτͰ࣮ߦ͢ΔλεΫΛ௥Ճ 4BTTͷίϯύΠϧ HVMQ!
51. HVMQUBTL EFGBVMU
    
    
    HVMQTFSJFT
    
    
    
    
    XBUDI
    
    
    
     4BTTͷίϯύΠϧ σϑΥϧτͰ࣮ߦ͢ΔλεΫΛ௥Ճ HVMQ!
52. ·ͱΊ
53. w ίʔσΟϯάͷ޻ఔ͸ͨ͘͞Μ͋ͬͯ൥ࡶ
    w ͦΕΒΛࣗಈԽͯ͘͠ΕΔʮHVMQKTʯ
    w গ͠ͷ࣌୹͔΋͠Εͳ͍͚ͲɺͪΓ΋ͭ΋Ε͹͍ͭ΋ͷ੍ ࡞ΑΓૣ͘Ͱ͖Δ
    w HVMQGJMFKT΋ॻ͍ͯ͋Δ͜ͱ͸୯७
    w HVMQ!΁ͷҎ߱΋ͦΜͳʹखؒ͡Όͳ͍
 ·ͱΊ
54. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
55. ޿ౡϑϩϯτΤϯυษڧձ
    7PM
    
    DPODSFUFʹ৮ͬͯΈΑ͏
    ώϩϑϩ$.4෦
    7PM ݄೔ ౔
    ʙ גࣜձࣾϦʔυεϖʔε
    ޿ౡݝ޿ౡࢢத্۠ീஸງ
    ϐϩςΟʔώϩγϚ' IUUQTIJSPGVSPPSH