LoginSignup
2

More than 5 years have passed since last update.

Laravel ElixirからMixへ変更

Posted at

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が出ないまま…。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2