Yeoman Grunt Bower

Yeoman Grunt Bower

Yeoman Grunt Bower talks in Nodefest 2013

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

October 26, 2013
Tweet

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