Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Matsuo (TAM)
September 25, 2015

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

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

Matsuo (TAM)

September 25, 2015
Tweet

More Decks by Matsuo (TAM)

Other Decks in Technology

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 …??

  20. None
  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. ͓ΘΓ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠