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
76
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
830
「偏愛マップ」ワークショップ導入 / 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.3k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
170
Other Decks in Technology
See All in Technology
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
240
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
0
380
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
PostgreSQL Unconference #52 pg_tde
nori_shinoda
0
190
お問い合わせ対応の改善取り組みとその進め方
masartz
1
340
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
2k
caching_sha2_passwordのはなし
boro1234
0
210
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
270
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
120
PHPでアクターモデルを活用したSagaパターンの実践法 / php-saga-pattern-with-actor-model
ytake
0
1k
View Transition API
shirakaba
1
930
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
BBQ
matthewcrist
88
9.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Side Projects
sachag
452
42k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Facilitating Awesome Meetings
lara
53
6.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Adopting Sorbet at Scale
ufuk
75
9.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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 ॻ͖͍ͨਓࢀߟʹͳΔͷͰ
͓ΘΓ ͋Γ͕ͱ͏͍͟͝·ͨ͠