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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
96
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.1k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
250
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
760
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
200
TanStack DB ~状態管理の新しい考え方~
bmthd
2
300
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
960
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
tool ディレクティブを導入してみた感想
sgash708
1
150
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
380
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
460
Featured
See All Featured
Balancing Empowerment & Direction
lara
2
580
Docker and Python
trallard
45
3.5k
Building an army of robots
kneath
306
46k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Become a Pro
speakerdeck
PRO
29
5.5k
KATA
mclloyd
32
14k
Fireside Chat
paigeccino
39
3.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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༵