$30 off During Our Annual Pro Sale. View Details »

Yeoman Grunt Bower

Yeoman Grunt Bower

Yeoman Grunt Bower talks in Nodefest 2013

Yosuke Furukawa
PRO

October 26, 2013
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

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