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
8
3.7k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
400
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
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
960
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
280
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
540
GraphRAGの仕組みまるわかり
tosuri13
7
440
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
GoのWebAssembly活用パターン紹介
syumai
3
10k
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
無関心の谷
kanayannet
0
180
XSLTで作るBrainfuck処理系
makki_d
0
210
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Into the Great Unknown - MozCon
thekraken
39
1.9k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Docker and Python
trallard
44
3.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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༵