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

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