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.)

    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