Laravel 5.4の前にMixを使うように変更しておく。
準備
https://laravel.com/docs/5.4/mix
https://github.com/JeffreyWay/laravel-mix
https://github.com/JeffreyWay/laravel-mix-example
https://github.com/laravel/laravel
laravel-mix-exampleもしくはLaravel新規プロジェクトを参考に書き換え。
package.json
scriptsとdevDependencies部分をコピー。
exampleでは0.4.0だけど最新バージョンに合わせる。
{
"private": true,
"scripts": {
"webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"lodash": "^4.16.2",
"vue": "^2.0.1"
}
}
webpack.mix.js
gulpfile.jsの代わり。
exampleからコピーしてきて元のgulpfileから必要な部分を持ってくる。
ほとんど同じ使い方だけど微妙に書き方変わってる部分もある。
Elixirで複雑なことしてた場合は大変かもしれない。
mix()ヘルパー
Laravel5.4では不要。
mix.phpをapp/に置いて
https://github.com/JeffreyWay/laravel-mix-example/blob/master/app/mix.php
"files": ["app/mix.php"]
composer.jsonに追加
https://github.com/JeffreyWay/laravel-mix-example/blob/master/composer.json#L24
public
npm run production
でビルド。
plublic/内に作られるファイルも変わってるので不要なファイルは削除。
resources/assets
app.jsとbootstrap.jsの構成になってるので合わせたいなら書き換え。
https://github.com/JeffreyWay/laravel-mix-example/tree/master/resources/assets/js
Vueは不要なら削除。
resources/views
elixir()からmix()に書き換え。
終わり
元が複雑なことしてなければwebpack.mix.js作るくらいなので難しいところはなさそう。
gulp使わなくなったのはいいと思う。
ずっと4.0が出ないまま…。