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 で Gulp環境をさらっと作る / gulp+yeoman
Search
matsuo
September 26, 2015
Technology
1
94
Yeoman で Gulp環境をさらっと作る / gulp+yeoman
2015.09.26 関西フロントエンドUGでの発表資料です
matsuo
September 26, 2015
Tweet
Share
More Decks by matsuo
See All by matsuo
わたしと仕事とアジャイルコミュニティ / developers summit 2025
matsuoshi
0
1.1k
「偏愛マップ」ワークショップ導入 / eccentric love map
matsuoshi
0
1.6k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.5k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
4
1.2k
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
2k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8.2k
カスタム・プロパティと cssnext #csstalk
matsuoshi
2
2.4k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
190
Other Decks in Technology
See All in Technology
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
220
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
510
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
Obsidian応用活用術
onikun94
0
110
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
650
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.2k
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
140
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
150
サンドボックス技術でAI利活用を促進する
koh_naga
0
150
Language Update: Java
skrb
2
230
AWSで推進するデータマネジメント
kawanago
0
880
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
320
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
4 Signs Your Business is Dying
shpigford
184
22k
How STYLIGHT went responsive
nonsquared
100
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cult of Friendly URLs
andyhume
79
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
It's Worth the Effort
3n
187
28k
Transcript
YeomanͰ gulpڥΛ͞Βͬͱ࡞Δ 2015.09.26 দඌ (TAM inc.)
ࣗݾհ • ·͓ͭ ͻΖ͠ (TAM inc.) • PHP / JavaScript
/ Tech Direction • PHPΧϯϑΝϨϯεؔ ελοϑ • CoffeeScript ͖ͩͬͨͷͰ ͍·࿏಄ʹ໎͍ͬͯΔ
ͯ͞ gulp ͷڥߏங
ΦϨΦϨ gulpfile ͷۤ
ΦϨΦϨ͋Δ͋Δ • gulp ໘ന͍͚Ͳ৮͍ͬͯΔͱΩϦ͕ͳ͍…… • Ҋ݅͝ͱʹϓϥάΠϯΛ͍Ζ͍Ζࢼ͠ɺ άάΓɺϋϚΓɺ λεΫϑΥϧμߏม͑ͯΈͨΓ • ࠞཚ͕ͪ͠
ർΕ͕ͪ
ͳΜͤ gulpfile ͕མͪண͔ͳ͍
ͦͦϥΫ͕͔ͨͬͨͣ͠ ! ઃఆʹϋϚͬͯਐḿθϩͱ͔…
͏୭͔ʹؙ͍͛ͨ͠
Ͳ͔ͬͷΦδαϯʹ ؙ͍͛ͨ͠
http://yeoman.io/
Yeoman • ϑϩϯτΤϯυͷ։ൃڥͷ φΠεͳܗΛ४උͯ͘͠ΕΔπʔϧ • ίϚϯυ1ൃͰɺ͙͢։ൃʹ͔͔ΕΔڥ͕Ͱ͖Δ (Grunt / Gulp /
Bower / npm ͋ͨΓΛۦ) • for AngularJS, React, Polymer, WordPress ͳͲͳͲ • ຊ Yeoman ͷ gulp-webapp Λհ
Yeoman gulp-webapp http://yeoman.github.io/generator-gulp-webapp/
Yeoman gulp-webapp Λ͏ͱ • ʮgulp ͰΣϒαΠτ੍࡞ʯͷڥߏஙΛ ͯ͘͠ΕΔ • Yo ίϚϯυ
1ͭͰɺ͋ͬͱ͍͏·ʹ gulp ڥͰ͖͕͋Γ • gulpfile ʹ࢛ۤീۤͤͣɺ͍͖ͳΓ͑Δ
Πϯετʔϧ • Yeoman ຊମͱɺ gulp-webapp δΣωϨʔλΛΠϯετʔϧ (ཁnode.js) npm install -g
yo npm install -g generator-gulp-webapp
`yo gulp-webapp` ͰܗΛ࡞Δ
Φδαϯ͕࣭ͯ͘͠Δ
ࣗಈͰ npm / bower install ·Ͱ
ܗϑΝΠϧҰ͕ࣜͰ͖ͨ
gulpfile.babel.js …??
None
͓ͬͪΌΜ ES6 Ͱ gulp ॻ͖ΑΔ
தͷਓ google ͷΤϯδχΞͳͲ ͦ͏ͦ͏ͨΔϝϯόʔ
Ͱ͖͕͋ͬͨڥΛ֬ೝ
HTML ͷܗ͜Μͳײ͡
gulpfile.babel.js ͷத • watch • browser_sync • SCSS • autoprefixer
• babel • ESLint • sourcemap • mocha • Ϗϧυ ( /dist ʹग़ྗ) • HTML/CSS minify • uglify • imagemin
͍͍ͨͯ ͜ΕͰΑ͘Ͷʁײ
͍ํγϯϓϧ • gulp serve watch & live reload • gulp
serve:test ςετ • gulp build Ϗϧυ • gulp serve:dist Ϗϧυ݁ՌΛ֬ೝ
ΧελϚΠζํ๏͝༻ҙ • CoffeeScript ͱ͔ Jade ͱ͔͍͍ͨ → GitHub ͷυΩϡϝϯτ(Recipes) ݟͨΒOK
·ͱΊ
·ͱΊ • ڥߏங͕໘ɾͭΒ͍ͳΒɺYeoman Ͱ ΠέͯΔΦδαϯʹؙ͛ͯ͠͠·͑Δ • ϋϚΓϙΠϯτ͕ͳ͍ͷͰɺ λεΫϥϯφʔॳ৺ऀͷೖʹΑͦ͞͏ • ୡਓͨͪͷφΠεͳίʔυͳͷͰɺ
ࣗͰ gulpfile ॻ͖͍ͨਓࢀߟʹͳΔͷͰ
͓ΘΓ ͋Γ͕ͱ͏͍͟͝·ͨ͠