Gulp のビルドをもっと効率化するツールを作ってみた / Making a Tool for Optimizing a Build Process of Gulp

DIST.17 「Webデザインの現場のための効率化術」 2017/08/25

Transcript

1. Gulp ͷϏϧυΛ΋ͬͱޮ཰Խ͢Δ
   πʔϧΛ࡞ͬͯΈͨ
   DIST.17 ʮWebσβΠϯͷݱ৔ͷͨΊͷޮ཰Խज़ʯ
   2017/08/25
   

   View Slide

2. @ktsn (katashin)
   

   View Slide

3. View Slide

4. Pug Λ HTML ʹ

   ίϯύΠϧ
   

   View Slide

5. ։ൃαʔόʔ΋
   
   ΄͍͠
   

   View Slide

6. มߋ͞ΕͨΒ

   ϥΠϒϦϩʔυ

   ͍ͨ͠
   

   View Slide

7. ن໛͕େ͖͍ͱϏϧυͷ

   Ωϟογϡ΋΄͍͠
   

   View Slide

8. ͱͯ΋ͭΒ͍
   

   View Slide

9. → Houl
   

   View Slide

10. • ։ൃαʔόʔ
    
    • ϥΠϒϦϩʔυ
    
    • Ωϟογϡ
    
    શ෦΍ͬͯ͘ΕΔ
    

    View Slide

11. $ houl build
    $ houl dev
    $ houl watch
    

    View Slide

12. Houl ͷಛ௃
    • Gulp ϓϥάΠϯΛͦͷ··࢖͑Δ
    
    • ։ൃαʔόʔ͸ιʔεΛಈతʹϏϧυ͢Δ
    
    • ϑΝΠϧͷґଘؔ܎΋ղऍ͢Δ Watch ػೳ
    
    • ϏϧυͷΩϟογϡػೳ (--cache)
    
    • ϓϦηοτػೳ
    

    View Slide

13. $ npm i -g houl
    https://github.com/ktsn/houl
    υΩϡϝϯτ
    

    View Slide