お久しぶりです。
今回は以前苦戦したlaravel-elixir → laravel-mixにした際の手順を記載します。
同じように苦戦する方が出ないことを願って、かつ自分が忘れないためのメモです。

なお、laravel5.3以前 → 5.4以降へのアップグレードを検討している人向けです。
laravel自体のアップグレードはこちら

最近、フロントエンドはタスクランナー中心の開発が増えてきました。
laravelでは、これまでlaravel-elixirというパッケージを利用してscssやes2015・JSフレームワークの監視・公開ファイルへの変換を行っていました。
laravel5.4にて、上記に代わってlaravel-mixというパッケージが利用されるようになりました。
これまで内部的に利用していたgulpを利用せず、webpackの機能で変換処理を行っています。

手順

  • laravel-mixをインストールします。
npm install laravel-mix --save-dev

※注意点
laravel-mixは以下を参照し、できるだけ最新のバージョンを利用してください。
古いバージョンだとsassの変換や圧縮が動作しないことがありました。
https://github.com/JeffreyWay/laravel-mix/releases

  • laravel-elixir（とあれば関連パッケージ）をアンインストールします。
npm uninstall laravel-elixir laravel-elixir-vue-2 laravel-elixir-official --save-dev
  • package.jsonにnpm scriptを定義します（既存のdev、prodは削除してください）。

{
  ...
  "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"
  },
  ...
}
  • package.jsonと同じディレクトリにwebpack.mix.jsを生成し、gulpfile.jsを削除します。
// 以下はサンプルです。// 既存のgulpfile.jsとほぼ同じようなコードで対応可能ですが、詳細は上記リポジトリを参照ください。mix.js('resources/assets/js/app.js', 'js/')
   .sass('resources/assets/sass/app.scss', 'css/');

基本的にはこれで動作します。
個人的には、デフォルトでvuejsやreactを利用できるのはとても良いなと感じています（そのぶん依存ライブラリがとても多いですが）。