mixにしてみる

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

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

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

手順

  1. laravel-mixをインストールします。

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

  1. laravel-elixir(とあれば関連パッケージ)をアンインストールします。

  1. package.jsonにnpm scriptを定義します(既存のdev、prodは削除してください)。

  1. package.jsonと同じディレクトリにwebpack.mix.jsを生成し、gulpfile.jsを削除します。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA