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

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

Transcript

1. YeomanͰ
 gulp؀ڥΛ͞Βͬͱ࡞Δ 2015.09.26 দඌ (TAM inc.)
2. ࣗݾ঺հ • ·͓ͭ ͻΖ͠ (TAM inc.) • PHP / JavaScript / Tech Direction • PHPΧϯϑΝϨϯεؔ੢ ελοϑ • CoffeeScript ޷͖ͩͬͨͷͰ
 ͍·࿏಄ʹ໎͍ͬͯΔ
3. ͯ͞ gulp ͷ؀ڥߏங
4. ΦϨΦϨ gulpfile ͷۤ೰
5. ΦϨΦϨ͋Δ͋Δ • gulp ໘ന͍͚Ͳ৮͍ͬͯΔͱΩϦ͕ͳ͍…… • Ҋ݅͝ͱʹϓϥάΠϯΛ͍Ζ͍Ζࢼ͠ɺ
 ౎౓άάΓɺϋϚΓɺ
 λεΫ΍ϑΥϧμߏ੒΋ม͑ͯΈͨΓ • ࠞཚ͕ͪ͠ ർΕ͕ͪ
6. ͳΜͤ
 gulpfile ͕མͪண͔ͳ͍
7. ͦ΋ͦ΋ϥΫ͕͔ͨͬͨ͠͸ͣ ! ઃఆʹϋϚͬͯਐḿθϩͱ͔…
8. ΋͏୭͔ʹؙ౤͍͛ͨ͠
9. Ͳ͔ͬͷΦδαϯʹ
 ؙ౤͍͛ͨ͠
10. http://yeoman.io/
11. Yeoman • ϑϩϯτΤϯυͷ։ൃ؀ڥͷ
 φΠεͳ਽ܗΛ४උͯ͘͠ΕΔπʔϧ • ίϚϯυ1ൃͰɺ͙͢։ൃʹ͔͔ΕΔ؀ڥ͕Ͱ͖Δ
 (Grunt / Gulp / Bower / npm ͋ͨΓΛۦ࢖) • for AngularJS, React, Polymer, WordPress ͳͲͳͲ • ຊ೔͸ Yeoman ͷ gulp-webapp Λ঺հ
12. Yeoman gulp-webapp
 http://yeoman.github.io/generator-gulp-webapp/
13. Yeoman gulp-webapp Λ࢖͏ͱ • ʮgulp Ͱ΢ΣϒαΠτ੍࡞ʯͷ؀ڥߏஙΛ
 ͯ͘͠ΕΔ • Yo ίϚϯυ 1ͭͰɺ͋ͬͱ͍͏·ʹ
 gulp ؀ڥͰ͖͕͋Γ • gulpfile ʹ࢛ۤീۤͤͣɺ͍͖ͳΓ࢖͑Δ
14. Πϯετʔϧ • Yeoman ຊମͱɺ
 gulp-webapp δΣωϨʔλΛΠϯετʔϧ (ཁnode.js) npm install -g yo
 npm install -g generator-gulp-webapp
15. `yo gulp-webapp` Ͱ਽ܗΛ࡞Δ
16. Φδαϯ͕࣭໰ͯ͘͠Δ
17. ࣗಈͰ npm / bower install ·Ͱ
18. ਽ܗϑΝΠϧҰ͕ࣜͰ͖ͨ
19. gulpfile.babel.js …??
21. ͓ͬͪΌΜ ES6 Ͱ gulp ॻ͖ΑΔ
22. தͷਓ͸ google ͷΤϯδχΞͳͲ
 ͦ͏ͦ͏ͨΔϝϯόʔ
23. Ͱ͖͕͋ͬͨ؀ڥΛ֬ೝ
24. HTML ͷ਽ܗ͸͜Μͳײ͡
25. gulpfile.babel.js ͷத਎ • watch • browser_sync • SCSS • autoprefixer • babel • ESLint • sourcemap • mocha • Ϗϧυ ( /dist ʹग़ྗ) • HTML/CSS minify • uglify • imagemin
26. ͍͍ͨͯ
 ͜ΕͰΑ͘Ͷʁײ
27. ࢖͍ํ΋γϯϓϧ • gulp serve watch & live reload • gulp serve:test ςετ • gulp build Ϗϧυ • gulp serve:dist Ϗϧυ݁ՌΛ֬ೝ
28. ΧελϚΠζํ๏΋͝༻ҙ • CoffeeScript ͱ͔ Jade ͱ͔࢖͍͍ͨ →
 GitHub ͷυΩϡϝϯτ(Recipes) ݟͨΒOK
29. ·ͱΊ
30. ·ͱΊ • ؀ڥߏங͕໘౗ɾͭΒ͍ͳΒɺYeoman Ͱ
 ΠέͯΔΦδαϯʹؙ౤͛ͯ͠͠·͑Δ • ϋϚΓϙΠϯτ͕ͳ͍ͷͰɺ
 λεΫϥϯφʔॳ৺ऀͷೖ໳ʹ΋Αͦ͞͏ • ୡਓͨͪͷφΠεͳίʔυͳͷͰɺ
 ࣗ෼Ͱ gulpfile ॻ͖͍ͨਓ΋ࢀߟʹͳΔͷͰ͸
31. ͓ΘΓ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠