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やめてLaravel Mixはじめた話
Search
井上拓
January 19, 2019
Programming
1
210
gulpやめてLaravel Mixはじめた話
2019年 特別回「WEB TOUCH MEETING+ Adobe XD」のLT資料
井上拓
January 19, 2019
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
730
Laravel Mixではじめるwebpack
takanashi66
0
500
LT-WordPressの開発をプラグインで管理する
takanashi66
0
350
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
200
CSS Grid Layout Module
takanashi66
0
110
webサイトのiPhone X 対応
takanashi66
0
1.6k
web制作におけるGitフロー
takanashi66
0
600
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
300
CSS Grid Layout Module
takanashi66
0
280
Other Decks in Programming
See All in Programming
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.1k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
430
CSC305 Lecture 05
javiergs
PRO
0
210
チームの境界をブチ抜いていけ
tokai235
0
100
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
1
600
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
160
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
350
止められない医療アプリ、そっと Swift 6 へ
medley
1
130
CSC305 Lecture 04
javiergs
PRO
0
260
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
180
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.4k
Featured
See All Featured
Designing for Performance
lara
610
69k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Practical Orchestrator
shlominoach
190
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Music & Morning Musume
bryan
46
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
4 Signs Your Business is Dying
shpigford
185
22k
Statistics for Hackers
jakevdp
799
220k
The Cost Of JavaScript in 2023
addyosmani
53
9k
The Invisible Side of Design
smashingmag
301
51k
Done Done
chrislema
185
16k
Transcript
201 2019 ಛผճʮWEB TOUCH MEETINGʴ Adobe XDʯ gulpΊͯLaravel Mix͡Ίͨ
201 2019 ಛผճʮWEB TOUCH MEETINGʴ Adobe XDʯ gulpΊͯLaravel Mix͡Ίͨ
Q ·ͩϏϧυπʔϧͰ ফͯ͠Δͷʁ
A ͯ͠·͢
Ϗϧυπʔϧͷมભ
Ϗϧυπʔϧͷมભ
Q ͳΜͰgulpΊͨͷʁ
A ܧ͗͠ܧ͗͠ͰൿͷλϨΈ͍ͨʹͳ͔ͬͨΒ ࣮ΘΕͯͳ͍λεΫҰॹʹಈ͍ͯΔ
Q ͳΜͰLaravel Mixʹͨ͠ͷʁ
A ϝΠϯͷϑϨʔϜϫʔΫ͕ FuelPHP͔ΒLaravelʹ มΘ͔ͬͨΒ
ͦͦLaravel Mixͱʁ -BSBWFM.JYQSPWJEFTBqVFOU"1*GPSEFpOJOH8FCQBDLCVJMETUFQTGPSZPVS-BSBWFM BQQMJDBUJPOVTJOHTFWFSBMDPNNPO$44BOE+BWB4DSJQUQSFQSPDFTTPST IUUQTMBSBWFMDPNEPDTNJYJOUSPEVDUJPO Laravel Mixଟ͘ͷҰൠతͳCSSͱJavaScriptͷϓϦϓϩηοαΛ༻ ͠ɺLaravelΞϓϦέʔγϣϯͨΊʹɺWebpackͰͷϏϧυΛ؆୯ʹఆ ٛͰ͖ΔAPIΛఏڙ͍ͯ͠·͢ɻ
None
Q webpackͰ͍͍͡Όͳ͍ͷʁ
A ʮεϥεϥͱఆٛͰ͖Δʯ͕ϛι
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
Laravel mixͷಋೖ
Laravel MixͷಋೖʢLaravelʣ CSFXJOTUBMMDPNQPTFS DPNQPTFSDSFBUFQSPKFDUQSFGFSEJTUMBSBWFMMBSBWFM<QSPKFDUOBNF> LaravelύοέʔδཧʹcomposerΛ͏ͷͰΠϯετʔϧ composerΛ͍ɺLaravelΛΠϯετʔϧ͢Δ
Laravel MixͷಋೖʢLaravelʣ npmύοέʔδΛΠϯετʔϧ OQNJOTUBMM OQNSVOXBUDI ରϑΝΠϧΛࢹ͠มߋ͕͋Εมߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ
Q LaravelΘͳ͍࣌ Πϯετʔϧ͠ͳ͍ͱ͍͚ͳ͍ͷʁ
A ͪΖΜLaravel Mix୯ମͰಈ࡞͠·͢
https://github.com/JeffreyWay/laravel-mix
Laravel Mixʹඞཁͳͷ MT BQQ OPEF@NPEVMFT SPVUFT BSUJTBO
QBDLBHFMPDLKTPO TFSWFSQIQ CPPUTUSBQ QBDLBHFKTPO TUPSBHF DPNQPTFSKTPO QIQVOJUYNM UFTUT DPNQPTFSMPDL QVCMJD WFOEPS DPOpH SFBENFNE XFCQBDLNJYKT EBUBCBTF SFTPVSDFT
A ඞཁͳͷ package.jsonͱwebpack.mix.js͚ͩ
{ "private": true, "scripts": { "dev": "npm run development", "development":
"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js -- progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack- dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no- progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.22" } } QBDLBHFKTPO
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
Laravel Mixͷಋೖ OQNJOTUBMM OQNSVOXBUDI package.jsonͱwebpack.mix.jsΛ࣋ͬͯ͘Δ͚ͩͰ͙͢ʹ࢝ΊΒΕ· ͢ɻ
Q ͜Ε͚ͩ͡ΌΓͳ͍ JavaScriptVue.jsͰॻ͖͍ͨ
A webpack.mix.jsʹه͠·͠ΐ͏
const mix = require('laravel-mix'); mix.vue('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
{ "private": true, "scripts": { ~~ུ~~ }, "devDependencies": { "axios":
"^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.22" } } QBDLBHFKTPO
A LaravelVue.jsਪ͠Β͍͠
Q ReactͰॻ͖͍ͨ
A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹه͠·͠ΐ͏
Browsersyncͷಋೖ OQNJOTUBMM%SFBDUSFBDUEPN Reactຊମͱɺreact-domΛΠϯετʔϧ͠·͢ɻ
const mix = require('laravel-mix'); mix.react('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
Q ιʔεϚοϓ͕͍͍ͨ
A ؆୯ʹͰ͖·͢ ʢόά͋Γʣ
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps(); XFCQBDLNJYKT
None
None
ιʔεϚοϓͷಋೖ NJYTPVSDF.BQT ιʔεϚοϓΛCSSͱJavaScriptʹදࣔ͠·͢ CSSͷιʔεϚοϓʹόά͕͋Γɺه͕ඞཁ NJYXFCQBDL$POpH \EFWUPPMJOMJOFTPVSDFNBQ^
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps(); mix.webpackConfig({
devtool: "inline-source-map" }); XFCQBDLNJYKT
None
None
Q Browsersync͕͍͍ͨ
A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹه͠·͠ΐ͏
Browsersyncͷಋೖ OQNJOTUBMM%CSPXTFSTZODCSPXTFSTZODXFCQBDLQMVHJO BroesersyncຊମͱɺWebpack༻ͷϓϥάΠϯΛΠϯετʔϧ͠·͢ɻ
const mix = require('laravel-mix'); mix.vue('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.browserSync({ server:
'public', proxy: false, files: [ 'public/**/*.html', 'public/js/*.js', 'public/css/*.css', ] }) XFCQBDLNJYKT
·ͱΊ
·ͱΊ • ಋೖ͕؆୯ • ઃఆ؆୯ʹॻ͚Δ • webpackʹͰ͖Δ͜ͱɺLaravel mixͰͰ͖Δ • ιʔεϚοϓʹগ͠όά͕͋ΔͷͰҙ
݄ ʙ ౡϑϩϯτΤϯυษڧձ7PM ʰ-BSBWFM.JYͰ͡ΊΔXFCQBDLʱ Ϧʔυεϖʔεגࣜձࣾ ౡݝౡࢢத্۠ീஸງϐϩςΟʔώϩγϚ' IUUQTIJSPGVSPPSH
͋Γ͕ͱ͏͍͟͝·ͨ͠