Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
gulpをv3系から v4系にアップデートした話
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
nagasawaaaa
October 26, 2019
Programming
500
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
gulpをv3系から v4系にアップデートした話
update gulp v3 => v4
nagasawaaaa
October 26, 2019
More Decks by nagasawaaaa
See All by nagasawaaaa
勉強会を開いてよかった話
nagasawaaaa
0
680
CSS Transform Simulator を Vue.js で 作った話
nagasawaaaa
1
640
Vue meet up sapporo #1 VeeValidateの紹介
nagasawaaaa
1
400
Other Decks in Programming
See All in Programming
フロントエンドUIフレームワークのこれまでとこれから
ssssota
5
2.5k
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ! ~
po3rin
1
240
AI駆動開発にグラフDBを重ねてみた
satoshi256kbyte
2
790
Claude Codeを組織的に動かして月400PRを実現した話
happy_ryo
0
270
AIは賢い。でも実行環境は? CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
curekoshimizu
1
240
iOSDC2026登壇資料.pdf
riofujimon
0
120
RSSとCodexを使ってX投稿自動化してみた
ochtum
0
110
AIとGame Jamで、ゲームを完成させた話
takahirosaeki
0
120
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
yuukiw00w
0
190
モジュールの視点からSwiftを読み解く #iosdc
s_shimotori
0
120
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
nogu66
0
150
LoopHub - ローカルで動く GitHub で、AI と共同開発
jugyo
1
530
Featured
See All Featured
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
540
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
700
Docker and Python
trallard
47
4.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Skip the Path - Find Your Career Trail
mkilby
1
230
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
230
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
330
What's in a price? How to price your products and services
michaelherold
247
13k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Fireside Chat
paigeccino
43
4k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
280
Transcript
HVMQΛWܥ͔Β WܥʹΞοϓσʔτͨ͠ ᖒݡʢ!OBHBTBXBBBBʣ ΏΔ8FCษڧձ!ࡳຈ
ࣗݾհ w ໊લɿᖒݡʢͳ͕͞Θ͞ͱ͠ʣ w 5XJUUFSɿ!OBHBTBXBBBB w ॴଐɿגࣜձࣾύϯηΤϯδχΞ w ׆ಈɿ+48PSLTIPQ4BQQPSPʢ+BWB4DSJQUͷษڧձʣ 7VFKT/VYUKT͘͘ձ
ΏΔ8FCษڧձ!ࡳຈ
ࠓ͢͜ͱ w HVMQWʹͳͬͯศརͩͳͱࢥͬͨՃػೳͷհ w HVMQWHVMQWͷॻ͖ํͷҧ͍ ΏΔ8FCษڧձ!ࡳຈ
ຊͷαϯϓϧίʔυ IUUQTHJUIVCDPNOBHBTBXBBBBHVMQWUPW ΏΔ8FCษڧձ!ࡳຈ
ͦͦHVMQͱʁ ΏΔ8FCษڧձ!ࡳຈ
ݱͰ͑ΔHVMQೖୈճHVMQͱԿ͔c$PEF(SJE IUUQTBQQDPEFHSJEOFUFOUSZHVMQ lHVMQ/PEFKTΛϕʔεͱͨ͠ϏϧυγεςϜϔϧύʔ Ͱ͢ɻҎલ$PEF(SJEͰհͨ͠(SVOUͱࣅͨతΛ ࣋ͬͯ࡞ΒΕͨπʔϧͰɺHVMQΛ͑͞·͟·ͳ࡞ ۀΛࣗಈԽ͢Δ͜ͱ͕Ͱ͖·͢ɻz ΏΔ8FCษڧձ!ࡳຈ
HVMQͰग़དྷΔ͜ͱ w FKTɺQVHɺ/VOKVDLTͳͲͷ)5.-ςϯϓϨʔτΤϯδϯΛͬͨIUNMͷϏϧυ w 4BTTɺ4UZMVTͳͲͷ"MU$44ͷίϯύΠϧ w ίϯύΠϧ࣌ʹ"VUPQSFpYFSͰϕϯμʔϓϨϑΟοΫεΛࣗಈ༩ w ը૾ͷѹॖ w
8FCQBDLΛͬͯ+4Λόϯυϧ w CBCFMΛͬͯ+4ΛτϥϯεύΠϧ w 1SFUUJFSͰ+4Λίʔυܗ w ϒϥβͷࣗಈϦϩʔυʢ#SPXTFS4ZODͳͲʣ w ͦͷଞ ΏΔ8FCษڧձ!ࡳຈ
ൿͷλϨͱԽ͢HVMQpMFKT ΏΔ8FCษڧձ!ࡳຈ
ൿͷλϨԽ͢ΔݪҼ w HVMQpMFKT୭͔͕࡞ͬͨͷΛଞͷϓϩδΣΫτ͔Βͷ͍ճ͕ͪ͠ w ৽ೖࣾһઌഐ͕ͬͯΔͷΛงғؾͰ͍ͬͯΔ w OQNJͯ͠OQNTUBSUୟ͚ͱΓ͋͑ͣಈ͔͘Βʙతͳʜ w Ξοϓσʔτ͠ͳͯ͘ຬ͍ͯ͠Δ w
ͦͦ࡞ͬͨਓ͕ୀ৬ͯ͠ϝϯςφϯε͢Δਓ͕͍ͳ͘ͳͬͨ ΏΔ8FCษڧձ!ࡳຈ
ͦͷ݁Ռ ΏΔ8FCษڧձ!ࡳຈ
Wܥͷ··ࠓࢸΔ ˞ઌఔͷݪҼʹهࡌͨ͠ҰྫฐࣾΛྫʹͨ͠༰Ͱ͋Γ·ͤΜ WFSTJPO͕Wܥͷ࠷ޙ ΏΔ8FCษڧձ!ࡳຈ
ͦͯ͠HVMQW͕݄ʹ ϦϦʔε͞Εͨͷͷ ۀ͕͗ͯ͢͠εϧʔ ΏΔ8FCษڧձ!ࡳຈ
/VYUԌ্ϓϩδΣΫτʹΑΓ Ҏ্ଟͷʑΛૹ͍͕ͬͯͨɺ ϦϦʔεΛऴ͑ͯۀʹ༨༟͕ग़Δ ΏΔ8FCษڧձ!ࡳຈ
༨༟Ͱ͖ͨ͠ ϑϩϯτܥʢओʹ੩తαΠτ༻ʣͷ ςϯϓϨʔτΛߋ৽͢Δͧ ΏΔ8FCษڧձ!ࡳຈ
WWͰେ͖͘มΘͬͨͱ͜Ζ ΏΔ8FCษڧձ!ࡳຈ
JNQPSUFYQPSUߏจΛ͑ΔΑ͏ʹͳͬͨ w FTN˞ϞδϡʔϧΛΠϯετʔϧ͢Δ w ϑΝΠϧ໊ΛHVMQpMFKTHVMQpMFFTNKTʹมߋ͢Δ CBCFMΛೖΕͨΓɺ5ZQF4DSJQUͰॻ͚·͕͢ɺ ࠷ۙͷ/PEFKTʢWҎ߱ͱ͔ʜ ʣͦΕΒ͕ఏڙ͢ΔߏจΛ αϙʔτ͍ͯ͠ΔͷͰFTNΛಋೖ͢Δ͚ͩͰྑ͍ͱݸਓతʹࢥ͍·͢ɻ ͨͩ͠ɺHVMQpMFKTΛܕ͖ݴޠͰॻ͘ͷͰ͋Ε
5ZQF4DSJQUΛಋೖ͢ΔͷΞϦͰ͢ɻ ΏΔ8FCษڧձ!ࡳຈ ˞FTNCBCFMෆཁɺόϯυϧෆཁͷ&4Ϟδϡʔϧϩʔμʔ ˞WܥͰFTNೖΕͨΒग़དྷ͔ͨ͠Ε·ͤΜ͕ະݕূʜ
໊લΛมߋ͢Δ͚ͩͰHVMQ͕ Α͠ͳʹͬͯ͘ΕΔͷͰHVMQpMFFTNKTʹ FTNΛSFRVJSFPSJNQPSU͢Δඞཁͳ͍Ͱ͢ ΏΔ8FCษڧձ!ࡳຈ
ͪͳΈʹ ΏΔ8FCษڧձ!ࡳຈ
CBCFMΛͬͯHVMQpMFKTΛॻ͜͏ͱ͢Δͱʁ w ϑΝΠϧ໊ΛHVMQpMFCBCFMKTʹมߋ͢Δ w ࣍ͷϞδϡʔϧΛΠϯετʔϧ͢Δ w !CBCFMDPSF !CBCFMSFHJTUFS !CBCFMQPMZpMM !CBCFMDPSFKT
w CBCFMSD˞Λ࡞͠ઃఆΛՃ JNPSUFYQPSUͱBTZODBXBJU͏߹όϕΔ˞߹ख͕͔͔ؒΔɻ HVMQެࣜυΩϡϝϯτʹHVMQpMFCBCFMKTʹมߋͯ͠!CBCFMSFHJTUFSೖΕΖͱ͍͏ ͜ͱ͚ͩॻ͍ͯ͋Δɻ ΏΔ8FCษڧձ!ࡳຈ ˞CBCFMΛͬͯτϥϯεύΠϧ͢Δ͜ͱ ˞CBCFMͷઃఆϑΝΠϧ
5ZQF4DSJQUͦͦࢲ͕ ීஈۀͰॻ͍͍ͯͳ͍ͷͰ ࠓճׂѪʜ ΏΔ8FCษڧձ!ࡳຈ
JNPSUFYQPSUߏจWWൺֱ const gulp = require('gulp'); const runSequence = require('run-sequence'); gulp.task('css',
() => { console.log('css'); }); gulp.task('js', () => { console.log('js'); }); gulp.task('imagemin', () => { console.log('imagemin'); }); gulp.task('default', cb => { return runSequence('imagemin', ['css', 'js'], cb); }); WHVMQpMFKT import gulp from 'gulp'; async function css () { console.log('css'); } async function js () { console.log('js'); } async function imagemin () { console.log('imagemin'); } const build = gulp.parallel(css, js, imagemin); export default build; WHVMQpMFFTNKT ΏΔ8FCษڧձ!ࡳຈ ˞ॻ͖ํͷࢀߟͰ͋ΓɺλεΫͷதదͰ͢ɻ
λεΫͷ࡞ํ๏͕γϯϓϧʹͳͬͨ w HVMQUBTL ͰλεΫΛొ͠ͳͯ͘େৎʹͳͬͨ w ؔͷฦΓΛ1SPNJTFʹ͢ΔɺTUFSBNΛฦ͢ɺίʔϧόοΫؔ Λͯؔ͠ͰൃՐͤ͞ΕHVMQͷλεΫʹͳΔ˞ ΏΔ8FCษڧձ!ࡳຈ ˞ଞʹ͋Γ·͕͢ৄ͘͠υΩϡϝϯτΛࢀর͍ͩ͘͞ ɹɹIUUQTHVMQKTDPNEPDTFOHFUUJOHTUBSUFEBTZODDPNQMFUJPO
λεΫͷ࡞ํ๏WWൺֱ ΏΔ8FCษڧձ!ࡳຈ WHVMQpMFFTNKT import { src, dest, parallel } from
'gulp'; // steram を返す従来に似たパターン function streamCss () { return src('src/**/*.css') .pipe(dest('public_html')); } // Promiseを返すパターン1 async function asyncJs () { console.log('js'); } // Promiseを返すパターン2 function promiseImagemin () { console.log('imagemin'); return Promise.resolve('resolveの値は無視される') } // 何も返さない代わりにError-first callbacksを発火させるパターン function callbackHtml (cb) { console.log('html'); cb(); } const build = parallel(streamCss, asyncJs, callbackHtml, promiseImagemin); export default build; WHVMQpMFKT const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const runSequence = require('run-sequence'); gulp.task('css', () => { return gulp.src('src/**/*.css') .pipe(gulp.dest('public_html')); }); gulp.task('js', () => { return gulp.src('src/**/*.js') .pipe(gulp.dest('public_html')); }); gulp.task('imagemin', () => { return gulp.src('src/**/*.{gif,jpg,png,svg}') .pipe(imagemin()) .pipe(gulp.dest('public_html')); }); gulp.task('default', cb => { return runSequence('imagemin', ['css', 'js'], cb); }); ˞ॻ͖ํͷࢀߟͰ͋ΓɺλεΫͷதదͰ͢ɻ
ύϒϦοΫλεΫͱϓϥΠϕʔτλεΫʹ ͚Δ͜ͱ͕ग़དྷΔΑ͏ʹͳͬͨ w HVMQpMFKTͰFYQPSU͠ͳ͚ΕϓϥΠϕʔτλεΫʹͳΔ w ϓϥΠϕʔτλεΫΤϯυϢʔβʔ͕࣮ߦͰ͖ͳ͍ w ύϒϦοΫʹొ͢ΔʹHVMQpMFKTͰFYQPSU͢Δ ΏΔ8FCษڧձ!ࡳຈ ࢀߟɿIUUQTHVMQKTDPNEPDTFOHFUUJOHTUBSUFEDSFBUJOHUBTLT
ύϒϦοΫλεΫͱϓϥΠϕʔτλεΫ ΏΔ8FCษڧձ!ࡳຈ import { series, parallel } from 'gulp'; import
clean from './tasks/clean'; // プライベート async function css () { console.log('css'); } // プライベート async function js () { console.log('js'); } // プライベート async function imagemin () { console.log('imagemin'); } // パブリック const build = series( clean, parallel(css, js, imagemin) ); // exportすることによってコマンドラインから使えるようになります export default build; export const cleanDir = clean; ˞ॻ͖ํͷࢀߟͰ͋ΓɺλεΫͷதదͰ͢ɻ ˞QBDLBHFKTPOͷTDSJQUTʹHVMQΛՃ͍ͯ͠ΔఆͷͰ͢ɻ ӈͷΑ͏ͳHVMQGVMFFTNKTͷ߹ɺ FYQPSU͍ͯ͠ΔCVJME σϑΥϧτλεΫ ͱ DMFBO%JSͱ͍͏λεΫ͕ίϚϯυϥΠϯ͔Βୟ͘͜ ͱ͕Ͱ͖ΔύϒϦοΫλεΫͱͯ͠ొ͞Ε·͢ɻ ͦΕҎ֎ͷDTTɺKTɺJNBHFNJOͳͲ FYQPSU͍ͯ͠ͳ͍ͨΊɺ࣍ͷΑ͏ͳίϚϯυ͕௨Γ ·ͤΜɻ $ npm run gulp $ npm run gulp css Task never defined: css // エラーとなる $ npm run gulp cleanDir
ྻॲཧɺฒྻॲཧʹ SVOTFRVFODF͕ෆཁʹͳͬͨ w ྻॲཧ͢ΔTFSJFT ϝιου͕Ճ͞Εͨ w ฒྻॲཧ͢ΔQBSBMMFM ϝιου͕Ճ͞Εͨ ΏΔ8FCษڧձ!ࡳຈ ࢀߟɿIUUQTHVMQKTDPNEPDTFOBQJTFSJFT
IUUQTHVMQKTDPNEPDTFOBQJQBSBMMFM
QBSBMMFM TFSJFT ΏΔ8FCษڧձ!ࡳຈ ˞ॻ͖ํͷࢀߟͰ͋ΓɺλεΫͷதదͰ͢ɻ WHVMQpMFFTNKT import { series, parallel }
from 'gulp'; async function css () { console.log('css'); } async function js () { console.log('js'); } async function imagemin () { console.log('imagemin'); } const build = series( imagemin, parallel(css, js) ); export default build; WHVMQpMFKT const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const runSequence = require('run-sequence'); gulp.task('css', () => { return gulp.src('src/**/*.css') .pipe(gulp.dest('public_html')); }); gulp.task('js', () => { return gulp.src('src/**/*.js') .pipe(gulp.dest('public_html')); }); gulp.task('imagemin', () => { return gulp.src('src/**/*.{gif,jpg,png,svg}') .pipe(imagemin()) .pipe(gulp.dest('public_html')); }); gulp.task('default', cb => { return runSequence('imagemin', ['css', 'js'], cb); });
ιʔεϚοϓͷग़ྗʹϓϥάΠϯ͕ෆཁʹͳͬͨ ΏΔ8FCษڧձ!ࡳຈ ˞ॻ͖ํͷࢀߟͰ͋ΓɺλεΫͷதదͰ͢ɻ WHVMQpMFFTNKT import { src, dest } from
'gulp'; import sass from 'gulp-sass'; async function scss () { return src('src/**/*.scss', { base: 'src', sourcemaps: true }) .pipe(sass()) .pipe(dest('public_html', { sourcemaps: './' })); } export const buildSass = scss; WHVMQpMFKT const gulp = require('gulp'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); gulp.task('sass', () => { return gulp.src('src/**/*.scss', { base: 'src' }) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('public_html')); }); WܥͰTSDϝιουͱEFTUϝιουͷୈҾͷΦϓγϣϯʹ TPVSDFNBQTϓϩύςΟΛͤΔΑ͏ʹͳͬͨɻ USVFʹઃఆ͢ΔͱJOMJOFͰग़ྗ͞Εɺग़ྗ͢ΔύεΛจࣈྻͰઃఆ͢Δͱ֎෦ϑΝΠϧͰग़ྗ͞ΕΔɻ ࢀߟɿIUUQTHVMQKTDPNEPDTFOBQJTSDTPVSDFNBQT
ଞʹ͋Δ͚Ͳৄ͘͠ ެࣜυΩϡϝϯτΛݟͯͶ IUUQTHVMQKTDPNEPDTFOBQJDPODFQUT
·ͱΊ
·ͱΊ w πʔϧ͍͚͕େࣄɻHVMQπʔϧͷ̍ͭɻ HVMQ͕ಘҙͳ͜ͱHVMQʹɻ XFCQBDL͕ಘҙͳ͜ͱXFCQBDLʹΒͤΔɻ w Ϟμϯͳ+4Ͱॻ͚ͯɺࠓ·ͰϓϥάΠϯͰิ͍ͬͯͨػೳ͕ Ճ͞ΕͨHVMQWʹΞοϓσʔτ͠Α͏ɻ w 1BSDFMಋೖ؆୯ͰૉΒ͍͠πʔϧ͚ͩͲɺ
8&#αΠτ੍࡞ք۾ͰHVMQ·ͩ·ͩݱɻʢͷɺͣʜʣ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠