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
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
240
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
930
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
290
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
150
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
One Enishi After Another
snoozer05
PRO
0
110
開発生産性を上げるための生成AI活用術
starfish719
3
1.2k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
660
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
480
What's new in Spring Modulith?
olivergierke
1
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
YesSQL, Process and Tooling at Scale
rocio
173
14k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Thoughts on Productivity
jonyablonski
70
4.9k
Fireside Chat
paigeccino
40
3.7k
Code Reviewing Like a Champion
maltzj
526
40k
Automating Front-end Workflow
addyosmani
1371
200k
Code Review Best Practice
trishagee
72
19k
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༵