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
100
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.2k
「偏愛マップ」ワークショップ導入 / eccentric love map
matsuoshi
0
1.6k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.6k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
4
1.2k
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
2k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8.3k
カスタム・プロパティと cssnext #csstalk
matsuoshi
2
2.5k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
200
Other Decks in Technology
See All in Technology
アノテーション作業書作成のGood Practice
cierpa0905
PRO
0
130
生成AI時代のPythonセキュリティとガバナンス
abenben
0
150
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
880
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
440
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
210
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.3k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
380
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
410
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
120
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.3k
Side Projects
sachag
455
43k
Facilitating Awesome Meetings
lara
57
6.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
A Tale of Four Properties
chriscoyier
161
23k
We Have a Design System, Now What?
morganepeng
53
7.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Thoughts on Productivity
jonyablonski
70
4.9k
For a Future-Friendly Web
brad_frost
180
10k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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 ॻ͖͍ͨਓࢀߟʹͳΔͷͰ
͓ΘΓ ͋Γ͕ͱ͏͍͟͝·ͨ͠