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

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

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

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

April 20, 2018
Tweet

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. OQNJOJU ύοέʔδ؅ཧ QSPKFDUͷॳظઃఆΛߦ͏ OQNJOJUZ ϓϩδΣΫτΛڞ༗ͨ͠৔߹ͳͲʹ OQNJOTUBMM ࠓͷOQNͷ؀ڥ͕ἧ͏

  10. Πϯετʔϧ HVMQKTͷΠϯετʔϧ TVEPOQNJOTUBMMHHVMQDMJ OQNJOTUBMM%HVMQ άϩʔόϧΠϯετʔϧ ϩʔΧϧΠϯετʔϧ

  11. HVMQpMFKT

  12. 4BTTͷίϯύΠϧ HVMQTBTTͷΠϯετʔϧ OQNJOTUBMM%HVMQTBTT

  13. HVMQpMFKT

  14. HVMQpMFKT HVMQpMFKTͷجຊܗ HVMQUBTL bλεΫ໊ \ HVMQTSD ಡΈࠐΈΉϑΝΠϧ   ʙॲཧʙ

    QJQF HVMQEFTU ग़ྗ͢ΔσΟϨΫτϦ  ^ 
  15. TBTTͷίϯύΠϧ

  16. DPOTUHVMQSFRVJSF HVMQ  DPOTUTBTTSFRVJSF 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ͷΠϯετʔϧ OQNJOTUBMM%HVMQBVUPQSFpYFS w αϙʔτ͍ͨ͠ϒϥ΢βΛࢦఆ͠ɺඞཁͳϕϯμʔϓϨ ϑΟοΫεΛࣗಈͰ෇༩ͯ͘͠ΕΔ w $BO*VTFʜΛϕʔεʹ࡞ΒΕ͍ͯΔ w ϒϥ΢β΍όʔδϣϯΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ

  23. DPOTUBVUPQSFpYFSSFRVJSF HVMQBVUPQSFpYFS  ࢖͏ϓϥάΠϯΛಡΈࠐΉ ϕϯμʔϓϨϑΟοΫεͷ෇༩

  24. HVMQUBTL bTBTT  \  HVMQTSD TBTT TDTT  

    QJQF TBTT   QJQF BVUPQSFpYFS \ CSPXTFST<MBTUWFSTJPOT> ^   QJQF HVMQEFTU DTT  ^  4BTTͷλεΫʹ૊ΈࠐΉ ϕϯμʔϓϨϑΟοΫεͷ෇༩
  25. Τϥʔͷ੍ޚ

  26. Τϥʔͷ཈੍ HVMQQMVNCFSͷΠϯετʔϧ OQNJOTUBMM%HVMQQMVNCFS w 4BTTͷίϯύΠϧ࣌ʹΤϥʔ͕͋ΔͱɺHVMQͷXBUDIࣗ ମ͕ࢭ·ͬͯ͠·͏ͷΛճආ

  27. DPOTUQMVNCFSSFRVJSF HVMQQMVNCFS  ࢖͏ϓϥάΠϯΛಡΈࠐΉ Τϥʔͷ཈੍

  28. HVMQUBTL bTBTT  \  HVMQTSD bTBTT TDTT  ɹQJQF

    QMVNCFS   QJQF TBTT   QJQF BVUPQSFpYFS   QJQF HVMQEFTU DTT  ^  4BTTͷλεΫʹ૊ΈࠐΉ Τϥʔͷ཈੍
  29. TPVSDFNBQ

  30. TPVSDFNBQͷग़ྗ HVMQTPVSDFNBQTͷΠϯετʔϧ OQNJOTUBMM%HVMQTPVSDFNBQT w TPVSDFNBQTΛग़ྗ͢Δ

  31. DPOTUTPVSDFNBQTSFRVJSF 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ͷΠϯετʔϧ OQNJOTUBMM%CSPXTFSTZOD w ࣗಈͰϒϥ΢βΛϦϩʔυͯ͘͠ΕΔ w ϩʔΧϧαʔόΛཱͯΔͷͰεϚϗͰ΋֬ೝ͕Ͱ͖Δ w ΋ͪΖΜεϚϗ΋Ϧϩʔυͯ͘͠ΕΔ

  35. DPOTUCSPXTFS4ZODSFRVJSF CSPXTFSTZOD DSFBUF  ࢖͏ϓϥάΠϯΛಡΈࠐΉ ϒϥ΢βγϯΫ

  36. HVMQUBTL bCSPXTFSTZOD  \  CSPXTFS4ZODJOJU \   TFSWFS\

       CBTF%JSIUEPDT   ^  ^  ^  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. OQNJOTUBMM%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