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
Improving my own Ruby thereafter
sisshiki1969
1
160
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
print("Hello, World")
eddie
2
530
Reading Rails 1.0 Source Code
okuramasafumi
0
250
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Writing Fast Ruby
sferik
628
62k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Six Lessons from altMBA
skipperchong
28
4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠