Yeoman Grunt Bower - Speaker Deck

Slide 1

Slide 1 text

Yeoman, Grunt, Bower 13೥10݄26೔౔༵೔

Slide 2

Slide 2 text

my prof @yosuke_furukawa Working At : DeNA Follow me! Blog : from scratch Github proﬁle is here 13೥10݄26೔౔༵೔

Slide 3

Slide 3 text

My WORK creating web application framework support developers research & development 13೥10݄26೔౔༵೔

Slide 4

Slide 4 text

13೥10݄26೔౔༵೔

Slide 5

Slide 5 text

IS a collection of developer support tools. He has 13೥10݄26೔౔༵೔

Slide 6

Slide 6 text

·͊ཁ͸৭ʑ΍ͬͯ͘ΕΔ͓ͬ͞Μɻ Ұ൪ඒຯ͍͠ػೳ͸ςϯϓϨΛ࡞ͬͯ͘ΕΔ͜ͱɻ 13೥10݄26೔౔༵೔

Slide 7

Slide 7 text

Yeomanͷ࢖͍ํ How to Use Yeoman 13೥10݄26೔౔༵೔

Slide 8

Slide 8 text

$ npm install yo -g $ yo DEMO 13೥10݄26೔౔༵೔

Slide 9

Slide 9 text

yeomanΛ࢖͏࣌ʹࢀߟʹͳΔࢿྉଟ਺ 13೥10݄26೔౔༵೔

Slide 10

Slide 10 text

๻ͷࢿྉ΋݁ߏ͘Θ͍͠ࢿྉ... ͷ͸ͣɻ 13೥10݄26೔౔༵೔

Slide 11

Slide 11 text

ͱ͍͏༁Ͱৄࡉ͸ׂѪ 13೥10݄26೔౔༵೔

Slide 12

Slide 12 text

Yeomanͷྑ͞͸࢖͏͜ͱʹ͋ΔͷͰ͸ͳ͘ɺ ࣗ෼ͰखܰʹgeneratorΛ࡞ΕΔͱ͜Ζʹ͋Δɻ 13೥10݄26೔౔༵೔

Slide 13

Slide 13 text

yeoman Ͱͷ generator ͷ࡞Γํ ຊ୊Ͱ͢ɻ 13೥10݄26೔౔༵೔

Slide 14

Slide 14 text

yo ίϚϯυΛཧղ͠Α͏ yo ͬͯଧͭͱɺgenerator-.* ϑΥϧμΛ୳࢝͠ΊΔɻ DVSSFOU EJSFDUPSZ HMPCBM OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO DVSSFOUEJSFDUPSZ͔ HMPCBMͷHFOFSBUPSΛ ݕࡧ͢Δɻ ݟ͔ͭͬͨΒɺ Πϯετʔϧͨ͠ HFOFSBUPSͱͯ͠ ϦετΞοϓ͢Δɻ 13೥10݄26೔౔༵೔

Slide 15

Slide 15 text

Slide 16

Slide 16 text

ͳͷͰɺgeneratorΛ࡞Δ࣌͸ ҎԼͷ༷ͳߏ੒Λ࡞͓ͬͯ͘ͱศརɻ global ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қ DVSSFOU EJSFDUPSZ HFOFSBUPS OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO QBDLBHFKTPO OPEF@NPEVMFTͷԼʹ γϯϘϦοΫϦϯΫͰ HFOFSBUPSͷຊମΛ ෇͚͓ͯ͘ ๻ͷ੿࡞ɺ yeomania ͳΒ͜ͷߏ੒Λ CLIͰ؆୯ʹ࡞ͬͯ͘ΕΔɻ $ npm install yeomania -g $ yeomania create $ yeomania recreate 13೥10݄26೔౔༵೔

Slide 17

Slide 17 text

࣮ࡍʹ࡞Δ࣌͸ generator-generator ͕ศརʂ 13೥10݄26೔౔༵೔

Slide 18

Slide 18 text

$ npm install generator-generator -g $ mkdir generator- $ cd generator-<_your_fav_name> $ yo generator 13೥10݄26೔౔༵೔

Slide 19

Slide 19 text

DEMO 13೥10݄26೔౔༵೔

Slide 20

Slide 20 text

ᵓᴷᴷ LICENSE ᵓᴷᴷ README.md ᵓᴷᴷ app ᴹ ᵓᴷᴷ index.js ᴹ ᵋᴷᴷ templates ᴹ ᵓᴷᴷ _bower.json ᴹ ᵓᴷᴷ _package.json ᴹ ᵓᴷᴷ editorconﬁg ᴹ ᵓᴷᴷ jshintrc ᴹ ᵋᴷᴷ travis.yml ᵓᴷᴷ node_modules ᵓᴷᴷ package.json ᵋᴷᴷ test ᵓᴷᴷ temp ᵓᴷᴷ test-creation.js ᵋᴷᴷ test-load.js generator-generator Λ࣮ߦ͢Δͱ ҎԼͷϑΥϧμߏ੒͕ಘΒΕΔɻ 13೥10݄26೔౔༵೔

Slide 21

Slide 21 text

Slide 22

Slide 22 text

index.js generatorͷৼΔ෣͍ΛܾΊΔɺ͍Θ͹mainॲཧ ςϯϓϨʔτʹ৘ใΛຒΊࠐΈɺίϐʔ͢Δ ର࿩γΣϧ͔Βड͚औͬͨΦϓγϣϯΛॲཧ͢Δ ͱ͍ͬͨॲཧΛߦ͏ɻ 13೥10݄26೔౔༵೔

Slide 23

Slide 23 text

templates ഑෍͢ΔϑΝΠϧ܈ ผʹ໊લ͸templates͡Όͳͯ͘΋͍͍ɻ 13೥10݄26೔౔༵೔

Slide 24

Slide 24 text

yeoman generator API঺հ • ͜Ε͚ͩ͸͓͍֮͑ͯͨํ͕͍͍ generator Λ࡞Δ্Ͱศརͳ API TOP 5 13೥10݄26೔౔༵೔

Slide 25

Slide 25 text

actions api copy(src, dest) => ﬁleΛsrc͔Βdestʹίϐʔ template(src, dest) => ﬁleΛsrc͔Βdest΁ίϐʔͭ͠ ͭɺςϯϓϨʔτΤϯδϯΛར༻ͯ͠஋ΛຒΊΔɻ directory(src, dest) => directoryΛsrc͔Βdestʹίϐʔ ※ଞʹ΋৭ʑ(࠷ۙͩͱbulkCopy͕௥Ճ͞Εͨ) "author": { "name": "<%= yourname %>", "email": "<%= email %>", "url": "<%= githubUrl %>" }, 13೥10݄26೔౔༵೔

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

yeoman api this.yeoman ϚδΠϊϕʔςΟϒɻ // yeomanͷ࢖͍ํ console.log(this.yeoman); 13೥10݄26೔౔༵೔

Slide 30

Slide 30 text

yeoman api this.yeoman ϚδΠϊϕʔςΟϒɻ // yeomanͷ࢖͍ํ console.log(this.yeoman); ͜ΕΛग़ͨ͢Ί͚ͩͷAPI!! 13೥10݄26೔౔༵೔

Slide 31

Slide 31 text

yo ·ͱΊ • templateΛग़ྗͯ͘͠ΕΔͨΊͷπʔϧ • ศརAPIଟ͠ɻ • ؆୯ʹgeneratorΛ࡞ΔͳΒyeomaniaೖ ΕΔͱ͍͍Α 13೥10݄26೔౔༵೔

Slide 32

Slide 32 text

஌͓͍ͬͯͨํ͕͍͍Bower࠷৽ࣄ৘ 13೥10݄26೔౔༵೔

Slide 33

Slide 33 text

೔ຊͰҰ൪bowerʹৄ͍͠هࣄ 13೥10݄26೔౔༵೔

Slide 34

Slide 34 text

Bower 1.0.x ~ 1.2.x • bower home Ͱpackageͷ home page͕։͘Α͏ʹͳͬͨɻ • bower cache-clean ͔Β bower cache cleanʹɻ • bower prune ͰґଘϥΠϒϥϦ΋ؚΊͯશͯ ͷϥΠϒϥϦ͕uninstall͞ΕΔɻ • bower cache listͰcacheͷϦετ͕ݟΕΔɻ 13೥10݄26೔౔༵೔

Slide 35

Slide 35 text

Bower 1.0.x ~ 1.2.x • release candidateͷҙຯͰ 1.2.0-rc1Έ͍ͨʹ෇ ͚ΒΕ͍ͯΔ৔߹ɺσϑΥϧτͰ͸ͦͷόʔ δϣϯ͸Πϯετʔϧ͞Εͳ͘ͳͬͨɻ see issue #782 • install࣌ʹprogress͕ग़ΔΑ͏ʹͳͬͨɻ • more faster!!!! 13೥10݄26೔౔༵೔

Slide 36

Slide 36 text

஌͓͍ͬͯͨํ͕͍͍Grunt Tips 13೥10݄26೔౔༵೔

Slide 37

Slide 37 text

Grunt Λ front-end͚ͩͷπʔϧͱͯ͠࢖Θͳ͍ 13೥10݄26೔౔༵೔

Slide 38

Slide 38 text

Grunt͸λεΫϥϯφʔɻ pluginʹଟ͍ͷ͸ϑϩϯτΤϯυλεΫ͹͔Γ͚ͩͲɺ αʔόʔαΠυͷλεΫʹ΋࢖͏ͱḿΔɻ 13೥10݄26೔౔༵೔

Slide 39

Slide 39 text

ࠓΛͱ͖Ί͘DeNA੡ altJS JSXΛ αʔόʔαΠυͰ΋࢖ͬͯΔɻ 13೥10݄26೔౔༵೔

Slide 40

Slide 40 text

Ͱ΋ϑΝΠϧॻ͖׵͑ͨΒίϯύΠϧ͠௚͢ͷ໘౗ɻ grunt-watch Ͱ watch͠ͳ͕Β jsxϑΝΠϧ͕มߋ͞ΕͨΒ JSX ίϯύΠϧ => αʔόʔىಈ ͦͯ͠ livereload ·Ͱ΍Γ͍ͨ!! 13೥10݄26೔౔༵೔

Slide 41

Slide 41 text

grunt-jsx jsxΛίϯύΠϧͯ͘͠ΕΔgruntϥούʔ 13೥10݄26೔౔༵೔

Slide 42

Slide 42 text

αʔόʔ࠶ىಈͷλεΫΛ࡞͓ͬͯ͘ͱḿΔ server = grunt.util.spawn({ cmd: "node", args: ["main.jsx.js"] }, function(){}); 13೥10݄26೔౔༵೔

Slide 43

Slide 43 text

DEMO 13೥10݄26೔౔༵೔

Slide 44

Slide 44 text

DeNAͰͲͷఔ౓࢖͍ͬͯΔ͔ 13೥10݄26೔౔༵೔

Slide 45

Slide 45 text

Grunt͸݁ߏ࢖ͬͯΔϓϩμΫτଟ Bower͸݁ߏ࢖ͬͯΔϓϩμΫτগ Yeoman͸݁ߏ࢖ͬͯΔϓϩμΫτແ ଟ෼Yeomanͷ࡞Γํ͕ਁಁ͖ͬͯ͠ͳ͍;_; 13೥10݄26೔౔༵೔

Slide 46

Slide 46 text

·ͱΊ 13೥10݄26೔౔༵೔

Slide 47

Slide 47 text

yeoman generatorͷ࡞Γํ Bower ࠷৽ࣄ৘ Grunt Tips generator Λ࡞ΕΔਓ͕΋ͬͱ૿͑Δͱ օָ͕ʹͳͬͯخ͍͠ɻ 13೥10݄26೔౔༵೔