Laravel 8.x アセットのコンパイル（Mix）

イントロダクション

Laravel Mixは、Laracastsを作ったJeffrey Wayが開発したパッケージで、webpackを定義するためスラスラと書けるAPIを提供しています。多くの一般的なCSSおよびJavaScriptプリプロセッサを使用してLaravelアプリケーションのビルドステップを定義します。

言い換えると、Mixを使用すると、アプリケーションのCSSファイルとJavaScriptファイルを簡単にコンパイルして圧縮できます。シンプルなメソッドチェーンにより、アセットパイプラインを流暢に定義できます。例をご覧ください。

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Webpackとアセットのコンパイルを使い始めようとして混乱し圧倒されたことがある方は、Laravel　Mixを気に入ってくれるでしょう。ただし、アプリケーションの開発に必ず使用する必要はありません。お好きなアセットパイプラインツールを使用するも、まったく使用しないのも自由です。

Tip!! LaravelとTailwind CSSを使用してアプリケーションの構築を早急に開始する必要がある場合は、アプリケーションスターターキットのいずれかをチェックしてください。

インストールと準備

Nodeのインストール

Mixを実行する前に、まずNode.jsとNPMをマシンへ確実にインストールする必要があります。

node -v
npm -v

Nodeの公式ウェブサイトから簡単なグラフィカルインストーラを使用して、最新バージョンのNodeとNPMを簡単にインストールできます。または、Laravel Sailを使用している場合は、Sailを介してNodeとNPMを呼び出すことができます。

./sail node -v
./sail npm -v

Laravel Mixのインストール

残りの唯一のステップは、Laravel Mixをインストールすることです。Laravelの新規インストールでは、ディレクトリ構造のルートにpackage.jsonファイルがあります。デフォルトのpackage.jsonファイルには、Laravel Mixの使用を開始するために必要なすべてのものがすでに含まれています。このファイルは、PHPの依存関係ではなくNodeの依存関係を定義することを除けば、composer.jsonファイルと同じように考えてください。以下を実行して、参照する依存関係をインストールします。

npm install

Mixの実行

Mixはwebpackの上の設定レイヤーであるため、Mixタスクを実行するには、デフォルトのLaravel　package.jsonファイルに含まれているNPMスクリプトの１つを実行するだけです。devまたはproductionスクリプトを実行すると、アプリケーションのすべてのCSSおよびJavaScriptアセットがコンパイルされ、アプリケーションのpublicディレクトリへ配置されます。

// すべてのMixタスクを実行...
npm run dev

// すべてのMixタスクを実行し、出力を圧縮。
npm run prod

アセットの変更を監視

npm run watchコマンドはターミナルで実行され続け、関連するすべてのCSSファイルとJavaScriptファイルの変更を監視します。Webpackは、こうしたファイルのいずれか一つの変更を検出すると、アセットを自動的に再コンパイルします。

npm run watch

Webpackは、特定のローカル開発環境でファイルの変更を検出できない場合があります。これがシステムに当てはまる場合は、watch-pollコマンドの使用を検討してください。

npm run watch-poll

スタイルシートの操作

アプリケーションのwebpack.mix.jsファイルは、すべてのアセットをコンパイルするためのエントリポイントです。webpackの軽い設定ラッパーと考えてください。ミックスタスクをチェーン化して、アセットのコンパイル方法を正確に定義できます。

Tailwind CSS

Tailwind CSSは、HTMLを離れることなく、すばらしいサイトを構築するための最新のユーティリティファーストフレームワークです。Laravel Mixを使用したLaravelプロジェクトでこれを使い始める方法を掘り下げてみましょう。まず、NPMを使用してTailwindをインストールし、Tailwind設定ファイルを生成する必要があります。

npm install

npm install -D tailwindcss

npx tailwindcss init

initコマンドはtailwind.config.jsファイルを生成します。このファイルのcontentセクションでは、HTML テンプレート、JavaScript コンポーネント、その他 Tailwind のクラス名を含むソースファイルへのパスを設定することができ、これらのファイル内で使用されていないCSSクラスを本番環境のCSSビルドからパージします。

content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
],

次に、Tailwindの各「レイヤー」をアプリケーションのresources/css/app.cssファイルに追加する必要があります。

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwindのレイヤーを設定したら、アプリケーションのwebpack.mix.jsファイルを更新して、Tailwindを利用したCSSをコンパイルする準備が整います。

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

最後に、アプリケーションのプライマリレイアウトテンプレートでスタイルシートを参照する必要があります。多くのアプリケーションは、このテンプレートをresources/views/layouts/app.blade.phpに保存することを選択します。さらに、レスポンシブビューポートのmetaタグがまだ存在しない場合は、必ず追加してください。

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet">
</head>

PostCSS

PostCSSは、CSSを変換するための強力なツールであり、Laravel Mixにはじめから含まれています。デフォルトで、Mixは人気のあるAutoprefixerプラグインを利用して、必要なすべてのCSS3ベンダープレフィックスを自動的に適用します。ただし、アプリケーションに適したプラグインを自由に追加できます。

まず、NPMを介して希望するプラグインをインストールし、MixのpostCssメソッドを呼び出すときにプラグインの配列に含めます。postCssメソッドは、CSSファイルへのパスを最初の引数に取り、コンパイルしたファイルを配置するディレクトリを２番目の引数に取ります。

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')
]);

または、単純なCSSのコンパイルと圧縮を実現するために、追加のプラグインなしでpostCssを実行することもできます。

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

Sass

sassメソッドを使用すると、SassをWebブラウザで理解できるCSSにコンパイルできます。sassメソッドは、Sassファイルへのパスを最初の引数に取り、コンパイルしたファイルを配置するディレクトリを２番目の引数に取ります。

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

複数のSassファイルをそれぞれのCSSファイルにコンパイルし、sassメソッドを複数回呼び出すことで、結果のCSSの出力ディレクトリをカスタマイズすることもできます。

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

URL処理

LaravelMixはwebpackの上に構築されているため、いくつかのwebpackの概念を理解することが重要です。CSSコンパイルの場合、webpackはスタイルシート内のurl()呼び出しを書き直して最適化します。これは最初は奇妙に聞こえるかもしれませんが、信じられないほど強力な機能です。画像への相対URLを含むSassをコンパイルしたいとします。

.example {
    background: url('../images/example.png');
}

Note: url()へ指定された絶対パスはURLの書き換えから除外されます。たとえば、url('/images/thing.png')またはurl('http://example.com/images/thing.png')は変更されません。

デフォルトでは、Laravel Mixとwebpackはexample.pngを見つけ、それをpublic/imagesフォルダにコピーしてから、生成されたスタイルシート内のurl()を書き換えます。そのため、コンパイルされたCSSは次のようになります。

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

この機能は便利かもしれませんが、皆さん既にお好みの方法でフォルダ構造を構成しているでしょう。この場合、次のようにurl()の書き換えを無効にすることができます。

mix.sass('resources/sass/app.scss', 'public/css').options({
    processCssUrls: false
});

このwebpack.mix.jsファイルの変更により、Mixはurl()と一致しなくなり、アセットをパブリックディレクトリにコピーしなくなります。つまり、コンパイルされたCSSは、最初に入力した方法と同じようになります。

.example {
    background: url("../images/thing.png");
}

ソースマップ

デフォルトでは無効になっていますが、ソースマップはwebpack.mix.jsファイルのmix.sourceMaps()メソッドを呼び出すことでアクティブにできます。コンパイル／パフォーマンスのコストが伴いますが、これにより、コンパイルされたアセットを使用するときに、ブラウザの開発者ツールに追加のデバッグ情報が提供されます。

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps();

ソースマッピングのスタイル

Webpackは、さまざまなソースマッピングスタイルを提供しています。デフォルトでは、Mixのソースマッピングスタイルはeval-source-mapに設定されており、これにより再構築時間が短縮されます。マッピングスタイルを変更したい場合は、sourceMapsメソッドを使用して変更できます。

let productionSourceMaps = false;

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps(productionSourceMaps, 'source-map');

JavaScriptの操作

Mixは、現代的なECMAScriptのコンパイル、モジュールのバンドル、圧縮、プレーンなJavaScriptファイルの連結など、JavaScriptファイルの操作に役立つの機能をいくつか提供します。さらに良いことに、これはすべてシームレスに機能し、大量のカスタム設定を必要としません。

mix.js('resources/js/app.js', 'public/js');

この１行のコードで、次の利点を活用できます。

  • 最新のEcmaScript文法.
  • モジュール
  • 本番環境での圧縮

Vue

Mixは、vueメソッドを使用するときに、Vue単一ファイルコンポーネントのコンパイルサポートに必要なBabelプラグインを自動的にインストールします。これ以上の設定は必要ありません。

mix.js('resources/js/app.js', 'public/js')
   .vue();

JavaScriptがコンパイルされたら、アプリケーションから参照できます。

<head>
    <!-- ... -->

    <script src="/js/app.js"></script>
</head>

React

MixはReactサポートに必要なBabelプラグインを自動的にインストールします。利用開始するには、reactメソッドの呼び出しを追加してください。

mix.js('resources/js/app.jsx', 'public/js')
   .react();

裏でMixは適切なbabel-preset-react Babelプラグインをダウンロードして取り込みます。JavaScriptをコンパイルしたら、アプリケーションから参照できます。

<head>
    <!-- ... -->

    <script src="/js/app.js"></script>
</head>

ベンダーの抽出

アプリケーション固有のJavaScriptをすべてReactやVueなどのベンダーライブラリへバンドルすることの潜在的な欠点のひとつは、長期的なキャッシュが困難になることです。たとえば、アプリケーションコードを１回更新すると、変更されていない場合でも、ブラウザはすべてのベンダーライブラリを再ダウンロードする必要があります。

アプリケーションのJavaScriptを頻繁に更新する場合は、すべてのベンダーライブラリを独自のファイルに抽出することを検討する必要があります。この方法により、アプリケーションコードを変更しても、大きなvendor.jsファイルのキャッシュには影響しません。Mixのextractメソッドはこれを簡単にします:

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])

extractメソッドは、vendor.jsファイルに抽出したいすべてのライブラリまたはモジュールの配列を受け入れます。上記のスニペットを例として使用すると、Mixは次のファイルを生成します。

  • public/js/manifest.js: Webpackマニフェストランタイム
  • public/js/vendor.js: 皆さんのvendorライブラリー
  • public/js/app.js: 皆さんのアプリケーションコード

JavaScriptエラーを回避するため、以下のファイルを正しい順序でロードしてください。

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

Webpackカスタム設定

時折、ベースとなるWebpack設定を手動で変更する必要が起きるでしょう。たとえば、参照する必要がある特別なローダーまたはプラグインがある可能性があります。

Mixは、短いWebpack設定オーバーライドをマージできる便利なwebpackConfigメソッドを提供します。これは、webpack.config.jsファイルの独自のコピーをコピーして維持する必要がないため、特に魅力的です。webpackConfigメソッドはオブジェクトを受け入れます。オブジェクトには、適用するWebpack固有の設定が含まれている必要があります。

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

バージョニング／キャッシュの破棄

多くの開発者は、コンパイルしたアセットにタイムスタンプまたは一意のトークンの接尾辞を付けて、提供してきたコードの古くなったコピーの代わりに、ブラウザに新しいアセットをロードするように強制します。Mixは、versionメソッドを使用してこれを自動的に処理できます。

versionメソッドは、コンパイルしたすべてのファイルのファイル名に一意のハッシュを追加し、より便利なブラウザキャッシュ破棄を可能にしています。

mix.js('resources/js/app.js', 'public/js')
    .version();

バージョン付きファイルを生成すると、正確なファイル名がわからなくなります。したがって、views内でLaravelのグローバルなmix関数を使用して、適切にハッシュされたアセットをロードする必要があります。mix関数は、ハッシュされたファイルの現在の名前を自動的に判別します。

<script src="{{ mix('/js/app.js') }}"></script>

通常、バージョン付きファイルは開発では不要であるため、npm run prodの実行中にのみ実行するよう、バージョン付け処理に指示できます。

mix.js('resources/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

カスタムMixベースURL

Mixでコンパイルされたアセットをアプリケーションとは別のCDNにデプロイする場合は、mix関数にが生成するベースURLを変更する必要があります。これには、アプリケーションのconfig/app.php設定ファイルにmix_url設定オプションを追加します。

'mix_url' => env('MIX_ASSET_URL', null)

Mix URLを設定すると、以降はアセットへのURLを生成するときに、mix関数は設定したURLのプレフィックスを付けます。

https://cdn.example.com/js/app.js?id=1964becbdd96414518cd

Browsersyncによるリロード

BrowserSyncは、ファイルの変更を自動的に監視し、手動で更新しなくても変更をブラウザに反映できます。mix.browserSync()メソッドを呼び出すことにより、これのサポートを有効にすることができます。

mix.browserSync('laravel.test');

BrowserSyncオプションは、JavaScriptオブジェクトをbrowserSyncメソッドに渡すことで指定できます。

mix.browserSync({
    proxy: 'laravel.test'
});

次に、npm run watchコマンドを使用してwebpackの開発サーバを起動します。これで、スクリプトまたはPHPファイルを変更すると、ブラウザがページを即座に更新して、変更を反映するのを目にできるでしょう。

環境変数

.envファイルの環境変数の1つにMIX_のプレフィックスを付けることで、環境変数をwebpack.mix.jsスクリプトに挿入できます。

MIX_SENTRY_DSN_PUBLIC=http://example.com

変数を.envファイルで定義したら、以降はprocess.envオブジェクトを介して変数へアクセスできます。ただし、タスクの実行中に環境変数の値が変更された場合は、タスクを再起動する必要があります。

process.env.MIX_SENTRY_DSN_PUBLIC

通知

利用可能な場合、Mixはコンパイル時にＯＳ通知を自動的に表示し、コンパイルが成功したかを即座にフィードバックします。しかし、これらの通知を無効にしたい状況もあるでしょう。そのような例の１つは、本番サーバでMixをトリガーするときです。通知は、disableNotificationsメソッドを使用して非アクティブ化できます。

mix.disableNotifications();

ドキュメント章別ページ

はじめに
リリースノート アップグレードガイド 貢献ガイド
利用開始
インストール 設定 ディレクトリ構造 スターターキット デプロイ
構成概念
ライフサイクル サービスコンテナ サービスプロバイダ ファサード
基礎
ルーティング ミドルウェア CSRF保護 コントローラ リクエスト レスポンス ビュー Bladeテンプレート URL生成 セッション バリデーション エラー処理 ログ
より深く知る
Artisanコンソール ブロードキャスト キャッシュ コレクション アセットコンパイル 契約 イベント ファイルストレージ ヘルパ HTTPクライアント 多言語化 メール 通知 パッケージ開発 キュー レート制限 タスクスケジュール
安全
認証 認可 メール確認 暗号化 ハッシュ パスワードリセット
データベース
準備 クエリビルダ ペジネーション マイグレーション シーディング Redis
Eloquent ORM
Eloquentの準備 リレーション コレクション ミューテタ／キャスタ APIリソース シリアライズ
テスト
テストの準備 HTTPテスト コンソールテスト ブラウザテスト データベーステスト モック
パッケージ
Breeze Cashier (Stripe) Cashier (Paddle) Dusk Envoy Fortify Homestead Horizon Jetstream Octane Passport Sail Sanctum Scout Socialite Telescope Valet
API
APIドキュメント
言語 ファイル
auth.php pagination.php passwords.php validation.php

ヘッダー項目移動

注目：アイコン：ページ内リンク設置（リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

リンク
サイトホーム ページ上部へ
言語
バージョン
10.x 9.x 8.x 7.x 6.x LTS 5.8 5.7 5.6 5.5 LTS 5.4 5.3 5.2 5.1 LTS 5.0 5.dev 4.2

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

P／D／C

ページ（章）移動の左オフキャンバスオープン

H／A

ヘッダー移動モーダルオープン

M／S

移動／設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

N／J

次ヘッダー(H2〜H4)へ移動

B／K

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる