Yeoman で gulp の環境を さらっと作る

2015.09.26
関西フロントエンドUG
いまどきのフロントエンド環境構築
http://kfug.connpass.com/event/17849/

Transcript

1. YeomanͰ

   gulp؀ڥΛ͞Βͬͱ࡞Δ
   2015.09.26 দඌ (TAM inc.)
   

   View Slide

2. ࣗݾ঺հ
   • ·͓ͭ ͻΖ͠ (TAM inc.)
   • PHP / JavaScript / Tech Direction
   • PHPΧϯϑΝϨϯεؔ੢ ελοϑ
   • CoffeeScript ޷͖ͩͬͨͷͰ

   ͍·࿏಄ʹ໎͍ͬͯΔ
   

   View Slide

3. ͯ͞ gulp ͷ؀ڥߏங
   

   View Slide

4. ΦϨΦϨ gulpfile ͷۤ೰
   

   View Slide

5. ΦϨΦϨ͋Δ͋Δ
   • gulp ໘ന͍͚Ͳ৮͍ͬͯΔͱΩϦ͕ͳ͍……
   • Ҋ݅͝ͱʹϓϥάΠϯΛ͍Ζ͍Ζࢼ͠ɺ

   ౎౓άάΓɺϋϚΓɺ

   λεΫ΍ϑΥϧμߏ੒΋ม͑ͯΈͨΓ
   • ࠞཚ͕ͪ͠ ർΕ͕ͪ
   

   View Slide

6. ͳΜͤ

   gulpfile ͕མͪண͔ͳ͍
   

   View Slide

7. ͦ΋ͦ΋ϥΫ͕͔ͨͬͨ͠͸ͣ
   !
   ઃఆʹϋϚͬͯਐḿθϩͱ͔…
   

   View Slide

8. ΋͏୭͔ʹؙ౤͍͛ͨ͠
   

   View Slide

9. Ͳ͔ͬͷΦδαϯʹ

   ؙ౤͍͛ͨ͠
   

   View Slide

10. http://yeoman.io/
    

    View Slide

11. Yeoman
    • ϑϩϯτΤϯυͷ։ൃ؀ڥͷ

    φΠεͳ਽ܗΛ४උͯ͘͠ΕΔπʔϧ
    • ίϚϯυ1ൃͰɺ͙͢։ൃʹ͔͔ΕΔ؀ڥ͕Ͱ͖Δ

    (Grunt / Gulp / Bower / npm ͋ͨΓΛۦ࢖)
    • for AngularJS, React, Polymer, WordPress ͳͲͳͲ
    • ຊ೔͸ Yeoman ͷ gulp-webapp Λ঺հ
    

    View Slide

12. Yeoman gulp-webapp

    http://yeoman.github.io/generator-gulp-webapp/
    

    View Slide

13. Yeoman gulp-webapp Λ࢖͏ͱ
    • ʮgulp Ͱ΢ΣϒαΠτ੍࡞ʯͷ؀ڥߏஙΛ

    ͯ͘͠ΕΔ
    • Yo ίϚϯυ 1ͭͰɺ͋ͬͱ͍͏·ʹ

    gulp ؀ڥͰ͖͕͋Γ
    • gulpfile ʹ࢛ۤീۤͤͣɺ͍͖ͳΓ࢖͑Δ
    

    View Slide

14. Πϯετʔϧ
    • Yeoman ຊମͱɺ

    gulp-webapp δΣωϨʔλΛΠϯετʔϧ
    (ཁnode.js)
    npm install -g yo

    npm install -g generator-gulp-webapp
    

    View Slide

15. `yo gulp-webapp` Ͱ਽ܗΛ࡞Δ
    

    View Slide

16. Φδαϯ͕࣭໰ͯ͘͠Δ
    

    View Slide

17. ࣗಈͰ npm / bower install ·Ͱ
    

    View Slide

18. ਽ܗϑΝΠϧҰ͕ࣜͰ͖ͨ
    

    View Slide

19. gulpfile.babel.js …??
    

    View Slide

20. View Slide

21. ͓ͬͪΌΜ ES6 Ͱ gulp ॻ͖ΑΔ
    

    View Slide

22. தͷਓ͸ google ͷΤϯδχΞͳͲ

    ͦ͏ͦ͏ͨΔϝϯόʔ
    

    View Slide

23. Ͱ͖͕͋ͬͨ؀ڥΛ֬ೝ
    

    View Slide

24. HTML ͷ਽ܗ͸͜Μͳײ͡
    

    View Slide

25. gulpfile.babel.js ͷத਎
    • watch
    • browser_sync
    • SCSS
    • autoprefixer
    • babel
    • ESLint
    • sourcemap
    • mocha
    • Ϗϧυ ( /dist ʹग़ྗ)
    • HTML/CSS minify
    • uglify
    • imagemin
    

    View Slide

26. ͍͍ͨͯ

    ͜ΕͰΑ͘Ͷʁײ
    

    View Slide

27. ࢖͍ํ΋γϯϓϧ
    • gulp serve watch & live reload
    • gulp serve:test ςετ
    • gulp build Ϗϧυ
    • gulp serve:dist Ϗϧυ݁ՌΛ֬ೝ
    

    View Slide

28. ΧελϚΠζํ๏΋͝༻ҙ
    • CoffeeScript ͱ͔ Jade ͱ͔࢖͍͍ͨ →

    GitHub ͷυΩϡϝϯτ(Recipes) ݟͨΒOK
    

    View Slide

29. ·ͱΊ
    

    View Slide

30. ·ͱΊ
    • ؀ڥߏங͕໘౗ɾͭΒ͍ͳΒɺYeoman Ͱ

    ΠέͯΔΦδαϯʹؙ౤͛ͯ͠͠·͑Δ
    • ϋϚΓϙΠϯτ͕ͳ͍ͷͰɺ

    λεΫϥϯφʔॳ৺ऀͷೖ໳ʹ΋Αͦ͞͏
    • ୡਓͨͪͷφΠεͳίʔυͳͷͰɺ

    ࣗ෼Ͱ gulpfile ॻ͖͍ͨਓ΋ࢀߟʹͳΔͷͰ͸
    

    View Slide

31. ͓ΘΓ

    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide