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
720
Laravel Mixではじめるwebpack
takanashi66
0
480
LT-WordPressの開発をプラグインで管理する
takanashi66
0
340
広島フロントエンド勉強会 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
580
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
CSS Grid Layout Module
takanashi66
0
270
Other Decks in Programming
See All in Programming
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
「兵法」から見る質とスピード
ickx
0
200
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
6
1k
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.6k
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
130
イベントストーミングから始めるドメイン駆動設計
jgeem
3
380
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
1
290
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Language of Interfaces
destraynor
158
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
We Have a Design System, Now What?
morganepeng
52
7.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
184
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
A designer walks into a library…
pauljervisheath
205
24k
How to Ace a Technical Interview
jacobian
276
23k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠