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
89
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
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.2k
Jitera Company Deck / JP
jitera
0
130
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
190
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
530
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
470
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
660
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
230
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
5
470
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
340
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
110
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
Thoughts on Productivity
jonyablonski
69
4.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Rails Girls Zürich Keynote
gr2m
95
14k
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 ॻ͖͍ͨਓࢀߟʹͳΔͷͰ
͓ΘΓ ͋Γ͕ͱ͏͍͟͝·ͨ͠