Laravel 開発: CSS と JavaScript で Laravel Mix を使用する方法?

Laravel Mix は Laravel Web アプリケーション開発フレームワークの一部であり、CSS と JavaScript の簡略化された処理を提供します。 Laravel Mix は Webpack に基づいており、開発者が CSS、JavaScript、その他のアセットを簡単に処理できるようにする統合 API を提供します。

この記事では、Laravel Mix の基本を紹介し、例を通して Laravel Mix を使用して CSS と JavaScript を処理する方法を示します。

Laravel Mix のインストール

Laravel Mix をインストールする前に、Node.js と npm をインストールする必要があります。インストールが完了したら、npm を使用して Laravel Mix と関連する依存関係をインストールします。

次のコマンドを使用して、Laravel アプリケーションのルート ディレクトリに Laravel Mix をインストールできます:

npm install laravel-mix --save-dev

インストールが完了したら、package.json にインストールできます。 ファイル Laravel Mix および関連する依存関係のバージョン情報を参照します。さらに、Laravel Mix のソースコードは node_modules/laravel-mix ディレクトリにもあります。

Laravel Mix の構成

Laravel Mix は使いやすいツールになるように設計されています。 Laravel Mix のデフォルト設定ファイルは webpack.mix.js で、ここに CSS と JavaScript をコンパイルするための簡単なコードを記述できます。

Laravel Mix を使用して CSS をコンパイルする例を次に示します:

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

mix.styles([
    'resources/css/app.css',
    'resources/css/extra.css'
], 'public/css/all.css');

この例は何を行うのですか?

まず、require 関数を使用して Laravel Mix を導入する必要があります。次に、mix 定数を使用して Laravel Mix API を呼び出します。 mix.styles() メソッドは CSS ファイルをコンパイルし、public/css/all.css に出力します。

複数の CSS ファイルを指定して、それらを 1 つのファイルに結合できます。 mix.sass() メソッドを使用して Sass ファイルをコンパイルしたり、mix.less() メソッドを使用して Less ファイルをコンパイルしたりすることもできます。

Laravel Mix を使用して JavaScript をコンパイルする例を次に示します:

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

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

この例は、resources/js/app.js および resources/js/ から派生しています。 extra.jsJavaScript ファイルをコンパイルし、public/js ディレクトリに出力します。

mix.react() メソッドを使用して ReactJS ファイルをコンパイルしたり、mix.vue() メソッドを使用して Vue.js ファイルをコンパイルしたりすることもできます。の上。

CSS と同様に、mix.js() メソッドで複数の JavaScript ファイルを定義して、1 つの JS ファイルにマージできます。

Laravel Mix で JavaScript と CSS ファイルを相互参照する例を次に示します:

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .styles([
        'public/css/app.css',
        'public/css/extra.css'
    ], 'public/css/all.css')
   .scripts([
        'public/js/app.js',
        'public/js/extra.js'
    ], 'public/js/all.js');

この例では、最初に mix.js() メソッドを使用してコンパイルします。 JavaScript ファイル。次に、mix.sass() メソッドを使用して Sass ファイルをコンパイルし、public/css ディレクトリに出力します。

次に、mix.styles() メソッドを使用して、public/css/app.css と public/css/extra.css# を結合します。 # #CSS ファイルにマージし、public/css/all.css に出力します。

最後に、

mix.scripts() メソッドを使用して、public/js/app.js と public/js/extra.js# を結合します。 ## JS ファイルにマージし、public/js/all.js に出力します。 CSS ファイルと JavaScript ファイルはできる限り別々に管理する必要があることに注意してください。こうすることで、他の資産に影響を与えることなく、資産の管理と微調整をより簡単に行うことができます。

アセットのコンパイル

webpack.mix.js

ファイルにコードを記述した後、次のコマンドを使用してアセットをコンパイルできます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:js;toolbar:false;'>npm run dev</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコマンド Webpack が実行され、コンパイルされた CSS および JavaScript ファイルが

public/css

および public/js ディレクトリに出力されます。 アセットのコンパイル時に実稼働モードでビルドする場合は、次のコマンドを使用できます:

npm run production

このコマンドは、アセット ファイルのサイズを最適化し、未使用のアセットを削除します。

結論

この記事では、Laravel Mix の基本について説明しました。 Laravel Mix を使用して CSS および JavaScript ファイルの操作を簡素化する方法を学びました。 Laravel Mix を使用すると、CSS ファイルと JavaScript ファイルを簡単にコンパイルし、アセットをより適切に管理および最適化できます。

幸いなことに、Laravel Mix は Laravel Web アプリケーションに組み込まれています。これにより、パイプラインの構築の複雑さを心配することなく、Laravel Mix を簡単に使用できるようになります。

以上がLaravel 開発: CSS と JavaScript で Laravel Mix を使用する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。