株式会社 Loco Partners の社内開発 LT 2014年11月18

2014年11月18日開催

株式会社 Loco Partners の社内開発 LT で Grunt の超入門について発表

Transcript

1. GRUNT നଳ
3. ࠷ۙͷ WEB ΞϓϦ
4. ࠷ۙͷ WEB ΞϓϦ։ൃ AltJS (CoffeeScript, TypeScript) ͷίϯύΠϧ ֦ு CSS (Sass, Less, Stylus) ͷίϯύΠϧ JS, CSS ͷ݁߹ͱѹॖ JS, CSS ͷߏจνΣοΫ
5. (खಈͰ)΍ͬͯΒΕΔ͔ʁ
6. ͜Μͳͷ͋Γ·͢ɻ
7. GRUNT ʁ
8. Node.jsΛ࢖༻ͨ͠ ࣗಈϏϧυπʔϧ
9. ʁʁʁ
10. ࠷ۙͷ WEB ΞϓϦ։ൃ AltJS (CoffeeScript, TypeScript) ͷίϯύΠϧ ֦ு CSS (Sass, Less, Stylus) ͷίϯύΠϧ JS, CSS ͷ݁߹ͱѹॖ JS, CSS ͷߏจνΣοΫ ཁ͢Δʹɺ͜ΕΒΛશ෦ GRUNT ͕ࣗಈͰ΍ͬͯ͘ΕΔʂ
11. Ͱ΋ɺࢲͦΜͳͷ֮͑ͯΔ ࣌ؒͳ͍͠ɻɻɻ ͦΜͳͷ࢖Θͳͯ͘΋ؾ߹͍Ͱख࡞ ۀͰ΍Δ͠ɻɻɻ
13. GRUNT ͸͜Μͳʹ؆୯ʹ࢝ΊΕΔʂ (౜ಥʹ࢝·Δ४උखॱ) ࠇ͍ը໘(ίϯιʔϧ)Λ։͍ͯɺ্͔Βॱʹίϐʔ & షΓ ෇͚ ͔Βͷ Enter!!! cd ~ && mkdir sandbox && mkdir -p sandbox/assets/css && mkdir sandbox/css touch sandbox/assets/css/part1.css && echo "body { background-color: #F2F2F0; }" > sandbox/assets/css/part1.css touch sandbox/assets/css/part2.css && echo "h1 { font-size: 100%; }" > sandbox/assets/css/part2.css
14. GRUNT ͸͜Μͳʹ؆୯ʹ࢝ΊΕΔʂ (౜ಥʹ࢝·Δ४උखॱ) ࠇ͍ը໘(ίϯιʔϧ)Λ։͍ͯɺ্͔Βॱʹίϐʔ & షΓ ෇͚ ͔Βͷ Enter!!! cd ~ && mkdir sandbox && mkdir -p sandbox/assets/css && mkdir sandbox/css touch sandbox/assets/css/part1.css && echo "body { background-color: #F2F2F0; }" > sandbox/assets/css/part1.css touch sandbox/assets/css/part1.css && echo "h1 { font-size: 100%; }" > sandbox/assets/css/part2.css
15. GRUNT ͸͜Μͳʹ؆୯ʹ࢝ΊΕΔ (౜ಥʹ࢝·ΔΠϯετʔϧखॱ) cd ~/sandbox ruby -e "$(curl -fsSL https://raw.githubusercontent.com/ Homebrew/install/master/install)" brew npm install npm install -g grunt-cli npm install grunt-contrib จࣈ͕Ұഋग़ͯ͘Δ͚ͲɺΠϯ ετʔϥʔͰιϑτΛΠϯετʔϧ ͍ͯ͠ΔΑ͏ͳ΋ͷͰ͢ɻ
16. GRUNT ͸͜Μͳʹ؆୯ʹ࢝ΊΕΔ (౜ಥʹ࢝·ΔΠϯετʔϧखॱ) cd ~/sandbox ruby -e "$(curl -fsSL https://raw.githubusercontent.com/ Homebrew/install/master/install)" brew npm install npm install -g grunt-cli npm install grunt-contrib จࣈ͕Ұഋग़ͯ͘Δ͚ͲɺΠϯ ετʔϥʔͰιϑτΛΠϯετʔϧ ͍ͯ͠ΔΑ͏ͳ΋ͷͰ͢ɻ
17. GRUNT ͸͜Μͳʹ؆୯ʹ࢝ΊΕΔ (࠷ޙͷΠϯετʔϧखॱ) cd ~/sandbox npm init ର࿩ܗࣜͰ৭ʑϝοηʔδ͕ग़ͯ͘Δ ͷͰɺͻͨ͢ΒEnterΛ࿈ଧʂʂ
18. ΋͏ɺΠϯετʔϧऴΘΓɻ
19. Ͱʁ
20. ͳʹ͢Μͷʁ
21. ɹCSS ͷ݁߹Λ GRUNT ʹ ख఻ͬͯ΋Β͍·͠ΐ͏
22. GRUNT ઃఆखॱ (CSS ͷ݁߹) cd ~/sandbox vi Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ cssmin: { compress: { files: { 'css/kansei.css': [ 'assets/css/part1.css', 'assets/css/part2.css' ] } } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); }; ϑΝΠϧͷதʹ ͍ͭ͜Λॻ͖ࠐΜͰอଘ ! ޷͖ͳΤσΟλͰ ࡞੒ͯ͠େৎ෉ʂ
23. GRUNT ࣮ߦʂ ! > grunt cssmin
24. GRUNT ࣮ߦʂ ! > grunt cssmin Running "cssmin:compress" (cssmin) task File css/kansei.css created: 60 B → 48 B ! Done, without errors. ͳΜ͔Ͱͨʂʂ
25. ΋͏ɺCSS ݁߹࡞ۀऴΘͬͯ·͢ɻ
26. GRUNT ͕ੜ੒ͨ͠ϑΝΠϧΛ֬ೝ cd ~/sandbox cat css/kansei.css
27. GRUNT ·ͱΊ ͜ͷଞʹ΋ Grunt ʹ͸ศརͳػೳɺ֦ு͕୔ࢁ͋Γ ·͢ɻ৭ʑௐ΂ͯ Gruntfile.js Λࣗ෼޷ΈʹΧελϚ Πζ͠·͠ΐ͏ɻ ࠇ͍ը໘(ίϯιʔϧ)͕ා͍ͳΒΤϯδχΞʹڠྗ ͯ͠΋Β͍·͠ΐ͏ɻ ҰਓͰ΍ΔͳΒɺ͸͡Ί͸ਂ͘ߟ͑ͣʹͱΓ͋͑ ࣮ͣߦͯ͠Έ·͠ΐ͏ɻ
28. ຊ೔΋͕Μ͹͍͖ͬͯ·͠ΐ͏ʂ