イントロダクション
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スクリプトの1つを実行するだけです。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ファイルへのパスを最初の引数に取り、コンパイルしたファイルを配置するディレクトリを2番目の引数に取ります。
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ファイルへのパスを最初の引数に取り、コンパイルしたファイルを配置するディレクトリを2番目の引数に取ります。
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');
この1行のコードで、次の利点を活用できます。
- 最新の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などのベンダーライブラリへバンドルすることの潜在的な欠点のひとつは、長期的なキャッシュが困難になることです。たとえば、アプリケーションコードを1回更新すると、変更されていない場合でも、ブラウザはすべてのベンダーライブラリを再ダウンロードする必要があります。
アプリケーションの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はコンパイル時にOS通知を自動的に表示し、コンパイルが成功したかを即座にフィードバックします。しかし、これらの通知を無効にしたい状況もあるでしょう。そのような例の1つは、本番サーバでMixをトリガーするときです。通知は、disableNotifications
メソッドを使用して非アクティブ化できます。
mix.disableNotifications();