トップ > Laravel > Laravel Elixir から Laravel Mix へ

Laravel Elixir から Laravel Mix へ

Laravel PHP JavaScript

あけましておめでとうございます。id:localdisk です。今年もよろしくお願いします。さて、昨年末 Laravel の作者である Taylor さんからこんな発言がありました。

Laravel Elixir のリネーム

Laravel 5.4 のリリースに合わせて Laravel Elixir の名前の変更を考えているとのこと。うん、サーチビリティよくないですからね。プログラミング言語である Elixir と被ってるという指摘は以前からありましたし。

このエントリとはあまり関係がないのですが、この手の話題を見聞きする度に Fabric という言葉はなぜ人々を惹きつけるのかということを考えてしまいます。

そして Taylor さんの発言からわずか1日。名前が決まったようです。

Laravel Mix ですか。これはこれで…うーん…。まぁ無難といえば無難ですね。現在の Laravel に付属されている gulpfile.js の記述が

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

となっており Mix という名前がつくのは自然ではあります。相変わらず検索しづらいですが。で、発言の僅か一時間後、Laravel Elixir の作者である Jeffrey さんから

「できたよ」

…早いっすね。というか明らかに待ち構えてましたね。というわけでできてました。

github.com

Laravel Mix を使ってみよう

せっかくなので、少し触ってみましょうか。ちょうどよいリポジトリもありますし。

github.com

上記リポジトリを clone して npm install あるいは yarn すれば使う準備は整います。まずは webpack.mix.js を見てみましょう。

let mix = require('laravel-mix').mix;


mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

ファイルの内容はあまり違いはないですね。あえて言えば、第1引数である変換対象のファイルパスが明示的になったのと、設定で決まっていた変換されたコードが出力されるパス public/(js|css) を明示的に指定するようになったという点でしょうか。

しかし内部的には大きな変更があります。以下の2点です。

  • gulp ではなく npm scripts を使うようになった
  • 以前はモジュール管理に Browserify, rollup, webpack から選択できるようになっていたが、webpack 一択になった

私はフロントエンドの流行にそこまで敏感ではなく、最近そういう流れだなーと漠然と感じていたのですが Laravel Mix のリリースでなるほどと思った次第。

Laravel Mix の npm scripts は4種類のコマンドが用意されています。どれも webpack コマンドを叩いている単純なものです。()はオプションです

  • webpack コマンド
    • ビルドを行う(-progress –hide-modules –config=webpack.config.js のパス)
  • dev コマンド
    • webpack コマンドに加えファイルの監視を行う(–watch)
  • hmr コマンド
  • production コマンド
    • ビルドを行う際に Minify される

カスタマイズしたいときは package.json を変更するのがよいと思います。設定を変更したい場合は node_modules/laravel-mix/setup/webpack.config.js を任意の場所にコピーし修正してから package.json にある npm scripts の --config オプションのパスを修正するとよいでしょう。

いつもの

当社では、東京と福岡で web サービスを作りたくてたまらないエンジニアを募集しております。

recruit.innovator.jp.net