Yeoman Grunt Bower

Yeoman Grunt Bower talks in Nodefest 2013

Transcript

1. Yeoman, Grunt, Bower 13೥10݄26೔౔༵೔
2. my prof @yosuke_furukawa Working At : DeNA Follow me! Blog : from scratch Github profile is here 13೥10݄26೔౔༵೔
3. My WORK creating web application framework support developers research & development 13೥10݄26೔౔༵೔
4. 13೥10݄26೔౔༵೔
5. IS a collection of developer support tools. He has 13೥10݄26೔౔༵೔
6. ·͊ཁ͸৭ʑ΍ͬͯ͘ΕΔ͓ͬ͞Μɻ Ұ൪ඒຯ͍͠ػೳ͸ςϯϓϨΛ࡞ͬͯ͘ΕΔ͜ͱɻ 13೥10݄26೔౔༵೔
7. Yeomanͷ࢖͍ํ How to Use Yeoman 13೥10݄26೔౔༵೔
8. $ npm install yo -g $ yo DEMO 13೥10݄26೔౔༵೔
9. yeomanΛ࢖͏࣌ʹࢀߟʹͳΔࢿྉଟ਺ 13೥10݄26೔౔༵೔
10. ๻ͷࢿྉ΋݁ߏ͘Θ͍͠ࢿྉ... ͷ͸ͣɻ 13೥10݄26೔౔༵೔
11. ͱ͍͏༁Ͱৄࡉ͸ׂѪ 13೥10݄26೔౔༵೔
12. Yeomanͷྑ͞͸࢖͏͜ͱʹ͋ΔͷͰ͸ͳ͘ɺ ࣗ෼ͰखܰʹgeneratorΛ࡞ΕΔͱ͜Ζʹ͋Δɻ 13೥10݄26೔౔༵೔
13. yeoman Ͱͷ generator ͷ࡞Γํ ຊ୊Ͱ͢ɻ 13೥10݄26೔౔༵೔
14. yo ίϚϯυΛཧղ͠Α͏ yo ͬͯଧͭͱɺgenerator-.* ϑΥϧμΛ୳࢝͠ΊΔɻ DVSSFOU EJSFDUPSZ HMPCBM OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO DVSSFOU
    EJSFDUPSZ͔ HMPCBMͷHFOFSBUPS Λ ݕࡧ͢Δɻ ݟ͔ͭͬͨΒɺ Πϯετʔϧͨ͠ HFOFSBUPSͱͯ͠ ϦετΞοϓ͢Δɻ 13೥10݄26೔౔༵೔
15. ͳͷͰɺgeneratorΛ࡞Δ࣌͸ ҎԼͷ༷ͳߏ੒Λ࡞͓ͬͯ͘ͱศརɻ global ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қ DVSSFOU EJSFDUPSZ HFOFSBUPS OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO QBDLBHFKTPO OPEF@NPEVMFTͷԼʹ γϯϘϦοΫϦϯΫͰ HFOFSBUPSͷຊମΛ ෇͚͓ͯ͘ 13೥10݄26೔౔༵೔
16. ͳͷͰɺgeneratorΛ࡞Δ࣌͸ ҎԼͷ༷ͳߏ੒Λ࡞͓ͬͯ͘ͱศརɻ global ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қ DVSSFOU EJSFDUPSZ HFOFSBUPS OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO QBDLBHFKTPO OPEF@NPEVMFTͷԼʹ γϯϘϦοΫϦϯΫͰ HFOFSBUPSͷຊମΛ ෇͚͓ͯ͘ ๻ͷ੿࡞ɺ yeomania ͳΒ͜ͷߏ੒Λ CLIͰ؆୯ʹ࡞ͬͯ͘ΕΔɻ $ npm install yeomania -g $ yeomania create <generator path> <output> $ yeomania recreate <generator path> <output> 13೥10݄26೔౔༵೔
17. ࣮ࡍʹ࡞Δ࣌͸ generator-generator ͕ศརʂ 13೥10݄26೔౔༵೔
18. $ npm install generator-generator -g $ mkdir generator-<your_fav_name> $ cd generator-<_your_fav_name> $ yo generator 13೥10݄26೔౔༵೔
19. DEMO 13೥10݄26೔౔༵೔
20. ᵓᴷᴷ LICENSE ᵓᴷᴷ README.md ᵓᴷᴷ app ᴹ ᵓᴷᴷ index.js ᴹ ᵋᴷᴷ templates ᴹ ᵓᴷᴷ _bower.json ᴹ ᵓᴷᴷ _package.json ᴹ ᵓᴷᴷ editorconfig ᴹ ᵓᴷᴷ jshintrc ᴹ ᵋᴷᴷ travis.yml ᵓᴷᴷ node_modules ᵓᴷᴷ package.json ᵋᴷᴷ test ᵓᴷᴷ temp ᵓᴷᴷ test-creation.js ᵋᴷᴷ test-load.js generator-generator Λ࣮ߦ͢Δͱ ҎԼͷϑΥϧμߏ੒͕ಘΒΕΔɻ 13೥10݄26೔౔༵೔
21. ᵓᴷᴷ LICENSE ᵓᴷᴷ README.md ᵓᴷᴷ app ᴹ ᵓᴷᴷ index.js ᴹ ᵋᴷᴷ templates ᴹ ᵓᴷᴷ _bower.json ᴹ ᵓᴷᴷ _package.json ᴹ ᵓᴷᴷ editorconfig ᴹ ᵓᴷᴷ jshintrc ᴹ ᵋᴷᴷ travis.yml ᵓᴷᴷ node_modules ᵓᴷᴷ package.json ᵋᴷᴷ test ᵓᴷᴷ temp ᵓᴷᴷ test-creation.js ᵋᴷᴷ test-load.js generator-generator Λ࣮ߦ͢Δͱ ҎԼͷϑΥϧμߏ੒͕ಘΒΕΔɻ ͕͜͜ຊମ index.js͕generatorͷৼΔ෣͍ΛܾΊΔ෦෼ templatesҎԼ͕࣮ࡍ഑ஔ͞ΕΔϑΝΠϧ܈ɻ 13೥10݄26೔౔༵೔
22. index.js generatorͷৼΔ෣͍ΛܾΊΔɺ͍Θ͹mainॲཧ ςϯϓϨʔτʹ৘ใΛຒΊࠐΈɺίϐʔ͢Δ ର࿩γΣϧ͔Βड͚औͬͨΦϓγϣϯΛॲཧ͢Δ ͱ͍ͬͨॲཧΛߦ͏ɻ 13೥10݄26೔౔༵೔
23. templates ഑෍͢ΔϑΝΠϧ܈ ผʹ໊લ͸templates͡Όͳͯ͘΋͍͍ɻ 13೥10݄26೔౔༵೔
24. yeoman generator API঺հ • ͜Ε͚ͩ͸͓͍֮͑ͯͨํ͕͍͍ generator Λ࡞Δ্Ͱศརͳ API TOP 5 13೥10݄26೔౔༵೔
25. actions api copy(src, dest) => fileΛsrc͔Βdestʹίϐʔ template(src, dest) => fileΛsrc͔Βdest΁ίϐʔͭ͠ ͭɺςϯϓϨʔτΤϯδϯΛར༻ͯ͠஋ΛຒΊΔɻ directory(src, dest) => directoryΛsrc͔Βdestʹίϐʔ ※ଞʹ΋৭ʑ(࠷ۙͩͱbulkCopy͕௥Ճ͞Εͨ) "author": { "name": "<%= yourname %>", "email": "<%= email %>", "url": "<%= githubUrl %>" }, 13೥10݄26೔౔༵೔
26. prompt api ର࿩γΣϧ͔Β஋Λड͚औΔAPI // ର࿩γΣϧͷઃఆΛهड़͢Δɻ var prompts = [ { //ม਺໊ name: 'yourname', // ϝοηʔδ message: 'What is your github name?', // σϑΥϧτ஋ default: 'someuser', // ܯࠂϝοηʔδ warning: '' }, ]; // ର࿩γΣϧ͔Βड͚औͬͨ஋͸Լهͷ Α͏ʹͯ͠ར༻͢Δɻ var cb = this.async(); this.prompt(prompts, function (props) { this.yourname = props.yourname; cb(); }.bind(this)); 13೥10݄26೔౔༵೔
27. install api ґଘϥΠϒϥϦΛΠϯετʔϧ͢ΔͨΊͷAPI installDependencies(option); Λར༻͢Δͱɺ package.jsonͱbower.jsonͷґଘϥΠϒϥϦΛશͯ installl͢Δɻ jsonʹهड़͞Ε͍ͯͳ͍΋ͷΛinstall͢Δ৔߹͸runInstall // installDependencies͸ԼهͷΑ͏ʹͯ͠ར༻͢Δɻ this.installDependencies({ bower : true, // bower.jsonͷґଘϥΠϒϥϦΛinstall͢Δ͔Ͳ͏͔ npm : true, // package.jsonͷґଘϥΠϒϥϦΛinstall͢Δ͔Ͳ͏͔ skipinstall : false, // installΛskip͢Δ͔Ͳ͏͔ callback : sometask // installޙʹॲཧ͢Δcallbackؔ਺ }); 13೥10݄26೔౔༵೔
28. spawn_command api ೚ҙͷίϚϯυΛ࣮ߦ͢ΔͨΊͷAPI ίϐʔͨ͠ޙʹcoffee => js ͷίϯύΠϧΛ͔͚Δ৔ ߹΍bowerͷϑΥϧμߏ੒Λมߋ͍ͨ͠৔߹ʹར༻ ͢Δ͜ͱ͕ଟ͍ɻ // spawnCommandͷ࢖͍ํ // gruntίϚϯυΛ࣮ߦͯ͠ɺbower:installΛݺͼग़͢ͳͲɻ this.spawnCommand('grunt', ['bower:install']) .on('exit', function (err) { if (err) console.log(err); }); 13೥10݄26೔౔༵೔
29. yeoman api this.yeoman ϚδΠϊϕʔςΟϒɻ // yeomanͷ࢖͍ํ console.log(this.yeoman); 13೥10݄26೔౔༵೔
30. yeoman api this.yeoman ϚδΠϊϕʔςΟϒɻ // yeomanͷ࢖͍ํ console.log(this.yeoman); ͜ΕΛग़ͨ͢Ί͚ͩͷAPI!! 13೥10݄26೔౔༵೔
31. yo ·ͱΊ • templateΛग़ྗͯ͘͠ΕΔͨΊͷπʔϧ • ศརAPIଟ͠ɻ • ؆୯ʹgeneratorΛ࡞ΔͳΒyeomaniaೖ ΕΔͱ͍͍Α 13೥10݄26೔౔༵೔
32. ஌͓͍ͬͯͨํ͕͍͍Bower࠷৽ࣄ৘ 13೥10݄26೔౔༵೔
33. ೔ຊͰҰ൪bowerʹৄ͍͠هࣄ 13೥10݄26೔౔༵೔
34. Bower 1.0.x ~ 1.2.x • bower home <package name> Ͱpackageͷ home page͕։͘Α͏ʹͳͬͨɻ • bower cache-clean ͔Β bower cache cleanʹɻ • bower prune ͰґଘϥΠϒϥϦ΋ؚΊͯશͯ ͷϥΠϒϥϦ͕uninstall͞ΕΔɻ • bower cache listͰcacheͷϦετ͕ݟΕΔɻ 13೥10݄26೔౔༵೔
35. Bower 1.0.x ~ 1.2.x • release candidateͷҙຯͰ 1.2.0-rc1Έ͍ͨʹ෇ ͚ΒΕ͍ͯΔ৔߹ɺσϑΥϧτͰ͸ͦͷόʔ δϣϯ͸Πϯετʔϧ͞Εͳ͘ͳͬͨɻ see issue #782 • install࣌ʹprogress͕ग़ΔΑ͏ʹͳͬͨɻ • more faster!!!! 13೥10݄26೔౔༵೔
36. ஌͓͍ͬͯͨํ͕͍͍Grunt Tips 13೥10݄26೔౔༵೔
37. Grunt Λ front-end͚ͩͷπʔϧͱͯ͠࢖Θͳ͍ 13೥10݄26೔౔༵೔
38. Grunt͸λεΫϥϯφʔɻ pluginʹଟ͍ͷ͸ϑϩϯτΤϯυλεΫ͹͔Γ͚ͩͲɺ αʔόʔαΠυͷλεΫʹ΋࢖͏ͱḿΔɻ 13೥10݄26೔౔༵೔
39. ࠓΛͱ͖Ί͘DeNA੡ altJS JSXΛ αʔόʔαΠυͰ΋࢖ͬͯΔɻ 13೥10݄26೔౔༵೔
40. Ͱ΋ϑΝΠϧॻ͖׵͑ͨΒίϯύΠϧ͠௚͢ͷ໘౗ɻ grunt-watch Ͱ watch͠ͳ͕Β jsxϑΝΠϧ͕มߋ͞ΕͨΒ JSX ίϯύΠϧ => αʔόʔىಈ ͦͯ͠ livereload ·Ͱ΍Γ͍ͨ!! 13೥10݄26೔౔༵೔
41. grunt-jsx jsxΛίϯύΠϧͯ͘͠ΕΔgruntϥούʔ 13೥10݄26೔౔༵೔
42. αʔόʔ࠶ىಈͷλεΫΛ࡞͓ͬͯ͘ͱḿΔ server = grunt.util.spawn({ cmd: "node", args: ["main.jsx.js"] }, function(){}); 13೥10݄26೔౔༵೔
43. DEMO 13೥10݄26೔౔༵೔
44. DeNAͰͲͷఔ౓࢖͍ͬͯΔ͔ 13೥10݄26೔౔༵೔
45. Grunt͸݁ߏ࢖ͬͯΔϓϩμΫτଟ Bower͸݁ߏ࢖ͬͯΔϓϩμΫτগ Yeoman͸݁ߏ࢖ͬͯΔϓϩμΫτແ ଟ෼Yeomanͷ࡞Γํ͕ਁಁ͖ͬͯ͠ͳ͍;_; 13೥10݄26೔౔༵೔
46. ·ͱΊ 13೥10݄26೔౔༵೔
47. yeoman generatorͷ࡞Γํ Bower ࠷৽ࣄ৘ Grunt Tips generator Λ࡞ΕΔਓ͕΋ͬͱ૿͑Δͱ օָ͕ʹͳͬͯخ͍͠ɻ 13೥10݄26೔౔༵೔