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
gulpをv3系から v4系にアップデートした話
Search
nagasawaaaa
October 26, 2019
Programming
490
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
660
CSS Transform Simulator を Vue.js で 作った話
nagasawaaaa
1
620
Vue meet up sapporo #1 VeeValidateの紹介
nagasawaaaa
1
400
Other Decks in Programming
See All in Programming
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
wagyu
0
200
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
12k
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
d0riven
0
320
Oxcを導入して開発体験が向上した話
yug1224
4
290
さぁV100、メモリをお食べ・・・
nilpe
0
130
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
240
AIエージェントと協働するCLI開発 — BunとOpenClawで学んだこと
yoshikouki
1
240
Hunting Vulnerabilities in Symfony with LLMs
vinceamstoutz
0
430
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
antonarhipov
2
470
プロパティの順序で型推論が壊れる!? TypeScript6.0の修正からContext-Sensitivityの仕組みを追う
bicstone
2
1.3k
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
4.7k
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
macha64
0
470
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
52k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
230
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
380
Chasing Engaging Ingredients in Design
codingconduct
0
210
Typedesign – Prime Four
hannesfritz
42
3.1k
Building the Perfect Custom Keyboard
takai
2
790
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.7k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
390
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
22k
Scaling GitHub
holman
464
140k
A Tale of Four Properties
chriscoyier
163
24k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.9k
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·ͩ·ͩݱɻʢͷɺͣʜʣ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠