Yeoman Grunt Bower talks in Nodefest 2013
Yeoman, Grunt, Bower1310݄26༵
View Slide
my prof@yosuke_furukawaWorking At : DeNA Follow me!Blog : from scratch Github profile is here1310݄26༵
My WORKcreating web application frameworksupport developersresearch & development1310݄26༵
1310݄26༵
IS a collection of developer support tools.He has1310݄26༵
·͊ཁ৭ʑͬͯ͘ΕΔ͓ͬ͞ΜɻҰ൪ඒຯ͍͠ػೳςϯϓϨΛ࡞ͬͯ͘ΕΔ͜ͱɻ1310݄26༵
Yeomanͷ͍ํHow to Use Yeoman1310݄26༵
$ npm install yo -g$ yoDEMO1310݄26༵
yeomanΛ͏࣌ʹࢀߟʹͳΔࢿྉଟ1310݄26༵
ͷࢿྉ݁ߏ͘Θ͍͠ࢿྉ... ͷͣɻ1310݄26༵
ͱ͍͏༁ͰৄࡉׂѪ1310݄26༵
Yeomanͷྑ͞͏͜ͱʹ͋ΔͷͰͳ͘ɺࣗͰखܰʹgeneratorΛ࡞ΕΔͱ͜Ζʹ͋Δɻ1310݄26༵
yeoman Ͱͷ generator ͷ࡞ΓํຊͰ͢ɻ1310݄26༵
yo ίϚϯυΛཧղ͠Α͏yo ͬͯଧͭͱɺgenerator-.* ϑΥϧμΛ୳࢝͠ΊΔɻDVSSFOUEJSFDUPSZHMPCBMOPEF@NPEVMFTHFOFSBUPSQBDLBHFKTPOOPEF@NPEVMFTHFOFSBUPSQBDLBHFKTPODVSSFOUEJSFDUPSZ͔HMPCBMͷHFOFSBUPSΛݕࡧ͢Δɻݟ͔ͭͬͨΒɺΠϯετʔϧͨ͠HFOFSBUPSͱͯ͠ϦετΞοϓ͢Δɻ1310݄26༵
ͳͷͰɺgeneratorΛ࡞Δ࣌ҎԼͷ༷ͳߏΛ࡞͓ͬͯ͘ͱศརɻglobal ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қDVSSFOUEJSFDUPSZHFOFSBUPSOPEF@NPEVMFTHFOFSBUPSQBDLBHFKTPOQBDLBHFKTPOOPEF@NPEVMFTͷԼʹγϯϘϦοΫϦϯΫͰHFOFSBUPSͷຊମΛ͚͓ͯ͘1310݄26༵
ͳͷͰɺgeneratorΛ࡞Δ࣌ҎԼͷ༷ͳߏΛ࡞͓ͬͯ͘ͱศརɻglobal ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қDVSSFOUEJSFDUPSZHFOFSBUPSOPEF@NPEVMFTHFOFSBUPSQBDLBHFKTPOQBDLBHFKTPOOPEF@NPEVMFTͷԼʹγϯϘϦοΫϦϯΫͰHFOFSBUPSͷຊମΛ͚͓ͯ͘ͷ࡞ɺ yeomania ͳΒ͜ͷߏΛCLIͰ؆୯ʹ࡞ͬͯ͘ΕΔɻ$ npm install yeomania -g$ yeomania create $ yeomania recreate 1310݄26༵
࣮ࡍʹ࡞Δ࣌ generator-generator ͕ศརʂ1310݄26༵
$ npm install generator-generator -g$ mkdir generator-$ cd generator-<_your_fav_name>$ yo generator1310݄26༵
DEMO1310݄26༵
ᵓᴷᴷ 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.jsgenerator-generator Λ࣮ߦ͢ΔͱҎԼͷϑΥϧμߏ͕ಘΒΕΔɻ1310݄26༵
ᵓᴷᴷ 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.jsgenerator-generator Λ࣮ߦ͢ΔͱҎԼͷϑΥϧμߏ͕ಘΒΕΔɻ͕͜͜ຊମindex.js͕generatorͷৼΔ͍ΛܾΊΔ෦templatesҎԼ͕࣮ࡍஔ͞ΕΔϑΝΠϧ܈ɻ1310݄26༵
index.jsgeneratorͷৼΔ͍ΛܾΊΔɺ͍ΘmainॲཧςϯϓϨʔτʹใΛຒΊࠐΈɺίϐʔ͢ΔରγΣϧ͔Βड͚औͬͨΦϓγϣϯΛॲཧ͢Δͱ͍ͬͨॲཧΛߦ͏ɻ1310݄26༵
templates͢ΔϑΝΠϧ܈ผʹ໊લtemplates͡Όͳ͍͍ͯ͘ɻ1310݄26༵
yeoman generator APIհ• ͜Ε͚͓͍֮ͩ͑ͯͨํ͕͍͍generator Λ࡞Δ্Ͱศརͳ API TOP 51310݄26༵
actions apicopy(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 %>"},1310݄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));1310݄26༵
install apiґଘϥΠϒϥϦΛΠϯετʔϧ͢ΔͨΊͷAPIinstallDependencies(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ؔ});1310݄26༵
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);});1310݄26༵
yeoman apithis.yeoman ϚδΠϊϕʔςΟϒɻ// yeomanͷ͍ํconsole.log(this.yeoman);1310݄26༵
yeoman apithis.yeoman ϚδΠϊϕʔςΟϒɻ// yeomanͷ͍ํconsole.log(this.yeoman);͜ΕΛग़ͨ͢Ί͚ͩͷAPI!!1310݄26༵
yo ·ͱΊ• templateΛग़ྗͯ͘͠ΕΔͨΊͷπʔϧ• ศརAPIଟ͠ɻ• ؆୯ʹgeneratorΛ࡞ΔͳΒyeomaniaೖΕΔͱ͍͍Α1310݄26༵
͓͍ͬͯͨํ͕͍͍Bower࠷৽ࣄ1310݄26༵
ຊͰҰ൪bowerʹৄ͍͠هࣄ1310݄26༵
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ͷϦετ͕ݟΕΔɻ1310݄26༵
Bower 1.0.x ~ 1.2.x• release candidateͷҙຯͰ 1.2.0-rc1Έ͍ͨʹ͚ΒΕ͍ͯΔ߹ɺσϑΥϧτͰͦͷόʔδϣϯΠϯετʔϧ͞Εͳ͘ͳͬͨɻsee issue #782• install࣌ʹprogress͕ग़ΔΑ͏ʹͳͬͨɻ• more faster!!!!1310݄26༵
͓͍ͬͯͨํ͕͍͍Grunt Tips1310݄26༵
Grunt Λ front-end͚ͩͷπʔϧͱͯ͠Θͳ͍1310݄26༵
GruntλεΫϥϯφʔɻpluginʹଟ͍ͷϑϩϯτΤϯυλεΫ͔Γ͚ͩͲɺαʔόʔαΠυͷλεΫʹ͏ͱḿΔɻ1310݄26༵
ࠓΛͱ͖Ί͘DeNA altJS JSXΛαʔόʔαΠυͰͬͯΔɻ1310݄26༵
ͰϑΝΠϧॻ͖͑ͨΒίϯύΠϧ͢͠ͷ໘ɻgrunt-watch Ͱ watch͠ͳ͕Β jsxϑΝΠϧ͕มߋ͞ΕͨΒJSX ίϯύΠϧ => αʔόʔىಈͦͯ͠ livereload ·ͰΓ͍ͨ!!1310݄26༵
grunt-jsxjsxΛίϯύΠϧͯ͘͠ΕΔgruntϥούʔ1310݄26༵
αʔόʔ࠶ىಈͷλεΫΛ࡞͓ͬͯ͘ͱḿΔserver = grunt.util.spawn({cmd: "node",args: ["main.jsx.js"]}, function(){});1310݄26༵
DeNAͰͲͷఔ͍ͬͯΔ͔1310݄26༵
Grunt݁ߏͬͯΔϓϩμΫτଟBower݁ߏͬͯΔϓϩμΫτগYeoman݁ߏͬͯΔϓϩμΫτແଟYeomanͷ࡞Γํ͕ਁಁ͖ͬͯ͠ͳ͍;_;1310݄26༵
·ͱΊ1310݄26༵
yeoman generatorͷ࡞ΓํBower ࠷৽ࣄGrunt Tipsgenerator Λ࡞ΕΔਓ͕ͬͱ૿͑Δͱօָ͕ʹͳͬͯخ͍͠ɻ1310݄26༵
yosuke_furukawa
huffon
kishida
yusukebe
ivargrimstad
techouse
yujisoftware
atinfinity
eddie
deepu105
miyuki2203
nano72mkn
kinocoboy2
aleyda
tammielis
nonsquared
pedronauck
keavy
speakerdeck
morganepeng
brianwarren
jonyablonski
tanoku
lara
jeffersonlam