Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yeoman Grunt Bower
Search
Yosuke Furukawa
PRO
October 26, 2013
Programming
20
5.7k
Yeoman Grunt Bower
Yeoman Grunt Bower talks in Nodefest 2013
Yosuke Furukawa
PRO
October 26, 2013
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.4k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.8k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.4k
Deep Dive International Conference
yosuke_furukawa
PRO
0
110
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.9k
Other Decks in Programming
See All in Programming
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
180
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
JS RPCを理解する
yusukebe
5
280
スタックトレース始めてみた
kuro_kurorrr
5
1.1k
Productivity is Messing Around and Having Fun
hollycummins
1
180
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Good first issues of TypeProf
mame
4
600
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.1k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Practical Orchestrator
shlominoach
183
9.8k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Rails Girls Zürich Keynote
gr2m
91
13k
Become a Pro
speakerdeck
PRO
13
4.6k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Producing Creativity
orderedlist
PRO
338
39k
It's Worth the Effort
3n
180
27k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Transcript
Yeoman, Grunt, Bower 1310݄26༵
my prof @yosuke_furukawa Working At : DeNA Follow me! Blog
: from scratch Github profile is here 1310݄26༵
My WORK creating web application framework support developers research &
development 1310݄26༵
1310݄26༵
IS a collection of developer support tools. He has 1310݄26༵
·͊ཁ৭ʑͬͯ͘ΕΔ͓ͬ͞Μɻ Ұ൪ඒຯ͍͠ػೳςϯϓϨΛ࡞ͬͯ͘ΕΔ͜ͱɻ 1310݄26༵
Yeomanͷ͍ํ How to Use Yeoman 1310݄26༵
$ npm install yo -g $ yo DEMO 1310݄26༵
yeomanΛ͏࣌ʹࢀߟʹͳΔࢿྉଟ 1310݄26༵
ͷࢿྉ݁ߏ͘Θ͍͠ࢿྉ... ͷͣɻ 1310݄26༵
ͱ͍͏༁ͰৄࡉׂѪ 1310݄26༵
Yeomanͷྑ͞͏͜ͱʹ͋ΔͷͰͳ͘ɺ ࣗͰखܰʹgeneratorΛ࡞ΕΔͱ͜Ζʹ͋Δɻ 1310݄26༵
yeoman Ͱͷ generator ͷ࡞Γํ ຊͰ͢ɻ 1310݄26༵
yo ίϚϯυΛཧղ͠Α͏ yo ͬͯଧͭͱɺgenerator-.* ϑΥϧμΛ୳࢝͠ΊΔɻ DVSSFOU EJSFDUPSZ HMPCBM OPEF@NPEVMFT HFOFSBUPS
QBDLBHFKTPO OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO DVSSFOUEJSFDUPSZ͔ HMPCBMͷHFOFSBUPS Λ ݕࡧ͢Δɻ ݟ͔ͭͬͨΒɺ Πϯετʔϧͨ͠ HFOFSBUPSͱͯ͠ ϦετΞοϓ͢Δɻ 1310݄26༵
ͳͷͰɺgeneratorΛ࡞Δ࣌ ҎԼͷ༷ͳߏΛ࡞͓ͬͯ͘ͱศརɻ global ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қ DVSSFOU EJSFDUPSZ HFOFSBUPS OPEF@NPEVMFT HFOFSBUPS QBDLBHFKTPO
QBDLBHFKTPO OPEF@NPEVMFTͷԼʹ γϯϘϦοΫϦϯΫͰ HFOFSBUPSͷຊମΛ ͚͓ͯ͘ 1310݄26༵
ͳͷͰɺ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> 1310݄26༵
࣮ࡍʹ࡞Δ࣌ generator-generator ͕ศརʂ 1310݄26༵
$ npm install generator-generator -g $ mkdir generator-<your_fav_name> $ cd
generator-<_your_fav_name> $ yo generator 1310݄26༵
DEMO 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.js generator-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.js generator-generator Λ࣮ߦ͢Δͱ ҎԼͷϑΥϧμߏ͕ಘΒΕΔɻ ͕͜͜ຊମ index.js͕generatorͷৼΔ͍ΛܾΊΔ෦ templatesҎԼ͕࣮ࡍஔ͞ΕΔϑΝΠϧ܈ɻ 1310݄26༵
index.js generatorͷৼΔ͍ΛܾΊΔɺ͍Θmainॲཧ ςϯϓϨʔτʹใΛຒΊࠐΈɺίϐʔ͢Δ ରγΣϧ͔Βड͚औͬͨΦϓγϣϯΛॲཧ͢Δ ͱ͍ͬͨॲཧΛߦ͏ɻ 1310݄26༵
templates ͢ΔϑΝΠϧ܈ ผʹ໊લtemplates͡Όͳ͍͍ͯ͘ɻ 1310݄26༵
yeoman generator APIհ • ͜Ε͚͓͍֮ͩ͑ͯͨํ͕͍͍ generator Λ࡞Δ্Ͱศརͳ API TOP 5
1310݄26༵
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 %>" }, 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 ґଘϥΠϒϥϦΛΠϯετʔϧ͢ΔͨΊͷ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ؔ }); 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 api this.yeoman ϚδΠϊϕʔςΟϒɻ // yeomanͷ͍ํ console.log(this.yeoman); 1310݄26༵
yeoman api this.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 name> Ͱ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 Tips 1310݄26༵
Grunt Λ front-end͚ͩͷπʔϧͱͯ͠Θͳ͍ 1310݄26༵
GruntλεΫϥϯφʔɻ pluginʹଟ͍ͷϑϩϯτΤϯυλεΫ͔Γ͚ͩͲɺ αʔόʔαΠυͷλεΫʹ͏ͱḿΔɻ 1310݄26༵
ࠓΛͱ͖Ί͘DeNA altJS JSXΛ αʔόʔαΠυͰͬͯΔɻ 1310݄26༵
ͰϑΝΠϧॻ͖͑ͨΒίϯύΠϧ͢͠ͷ໘ɻ grunt-watch Ͱ watch͠ͳ͕Β jsxϑΝΠϧ͕มߋ͞ΕͨΒ JSX ίϯύΠϧ => αʔόʔىಈ ͦͯ͠
livereload ·ͰΓ͍ͨ!! 1310݄26༵
grunt-jsx jsxΛίϯύΠϧͯ͘͠ΕΔgruntϥούʔ 1310݄26༵
αʔόʔ࠶ىಈͷλεΫΛ࡞͓ͬͯ͘ͱḿΔ server = grunt.util.spawn({ cmd: "node", args: ["main.jsx.js"] }, function(){});
1310݄26༵
DEMO 1310݄26༵
DeNAͰͲͷఔ͍ͬͯΔ͔ 1310݄26༵
Grunt݁ߏͬͯΔϓϩμΫτଟ Bower݁ߏͬͯΔϓϩμΫτগ Yeoman݁ߏͬͯΔϓϩμΫτແ ଟYeomanͷ࡞Γํ͕ਁಁ͖ͬͯ͠ͳ͍;_; 1310݄26༵
·ͱΊ 1310݄26༵
yeoman generatorͷ࡞Γํ Bower ࠷৽ࣄ Grunt Tips generator Λ࡞ΕΔਓ͕ͬͱ૿͑Δͱ օָ͕ʹͳͬͯخ͍͠ɻ 1310݄26༵