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
77
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
960
「偏愛マップ」ワークショップ導入 / eccentric love map
matsuoshi
0
1.5k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.4k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
4
1.1k
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
2k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8.2k
カスタム・プロパティと cssnext #csstalk
matsuoshi
2
2.4k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
170
Other Decks in Technology
See All in Technology
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
310
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
740
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
550
Automatically generating types by running tests
sinsoku
2
3.4k
システムとの会話から生まれる先手のDevOps
kakehashi
PRO
0
290
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
180
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
11
3.2k
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
750
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
240
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
750
アジャイル脅威モデリング#1(脅威モデリングナイト#8)
masakane55
3
230
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Site-Speed That Sticks
csswizardry
5
500
Designing for Performance
lara
608
69k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Gamification - CAS2011
davidbonilla
81
5.2k
Thoughts on Productivity
jonyablonski
69
4.6k
Designing Experiences People Love
moore
141
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Practical Orchestrator
shlominoach
186
11k
Git: the NoSQL Database
bkeepers
PRO
430
65k
A designer walks into a library…
pauljervisheath
205
24k
How GitHub (no longer) Works
holman
314
140k
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 ॻ͖͍ͨਓࢀߟʹͳΔͷͰ
͓ΘΓ ͋Γ͕ͱ͏͍͟͝·ͨ͠