トップ > laravel > 【Laravel Mix】複数のスタイルやスクリプトのコンパイル処理を改善する

【Laravel Mix】複数のスタイルやスクリプトのコンパイル処理を改善する

laravel webpack

LaravelはフロントエンドコンパイルをするためのツールとしてLaravel Mixが導入されています。

laravel.com

初期状態でも十分使いやすいのですが、機能が多いプロジェクトの場合ではそのままでは使いづらいところがあります。
例えばページ毎に別のスタイルやスクリプトを設定したい場合です。

今回は、複数のファイルをコンパイルしたい時の改善方法について触れます。　　

Laravel Mix とは

Laravel Mixはwebpackをラップしたツールです。

webpack.js.org

通常のwebpackとの違いは、初期設定がLaravelのプロジェクト構成に即したものになっています。
また、最初からcssやjsのライブラリ設定もラップされていますので設定は楽です。
もちろん、自分でwebpackの設定を書く事もできます。

複数ファイルをコンパイルする場合

公式に載っている方法では、コンパイルするファイルの指定方法は次のように記載されています。

readouble.com

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

メソッドチェーンでmixにファイルパスを追加する事でコンパイルを行います。
複数設定する場合は同様にメソッドチェーンを繋げて設定します。

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

数個であれば問題ないのですが、多くなってくると管理が難しくなります。
対象ファイルの検索はワイルドカード（*）指定ができないので、この方法でしか対応出来ません。

解決方法

コンパイル元のファイルパスを文字列で取得できれば、コンパイルするための関数を使う事が出来ます。
そこで、ファイルパス一覧で取得するために、globライブラリを使います。

www.npmjs.com

このライブラリを使う事で、特定のディレクトリ配下を巡回して対象のファイルを探す事ができます。

ダウンロード方法

nodeのライブラリですのでnpmでダウンロードします。

$ npm i -D glob

実装方法

glob を使用する事で、対象のファイルに対してmap処理する事ができます。

例えば、resourcesディレクトリ配下のファイルを、まとめてコンパイルしてpublishディレクトリ配下に作成したいとします。

f:id:nakahashi_h:20200801145156p:plain

その場合、webpack.mix.jsを下記のように設定します。

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

// globライブラリを読み込む
const glob = require('glob');

// jsディレクトリ配下の設定
glob.sync('resources/js/**/*.js').map(function(file){
    // ファイルパスを取得できるので、該当ディレクトリにコンパイルファイルを生成
    mix.js(file, 'public/js')
});

// sassディレクトリ配下の設定
glob.sync('resources/sass/**/*.scss').map(function(file){
    // ファイルパスを取得できるので、該当ディレクトリにコンパイルファイルを生成
    mix.sass(file, 'public/css')
});

これで、npm run devを実行すれば次のようにファイルが追加されます。
f:id:nakahashi_h:20200801145506p:plain

©︎2017-2018 WebSandBag