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.9k
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
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
15
2k
Goで作る、開発・CI環境
sin392
0
260
効率的な開発手段として VRTを活用する
ishkawa
0
160
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
What's new in AppKit on macOS 26
1024jp
0
150
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
型で語るカタ
irof
0
700
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing for Performance
lara
610
69k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Balancing Empowerment & Direction
lara
1
450
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
RailsConf 2023
tenderlove
30
1.1k
How to Ace a Technical Interview
jacobian
278
23k
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༵