Yeoman Grunt Bower

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೔౔༵೔