Laravelでのmixの使い方は何ですか

laravel では、「laravel mix」はフロントエンド タスク自動化管理ツールです。Mix は、Laravel アプリケーションの Webpack コンパイル タスクを定義できるシンプルでスムーズな API を提供します。Mix は、多くの CSS および JavaScript プリプロセッサをサポートします。エンドリソースは呼び出しを通じて管理できます。

#この記事の動作環境: Windows 10 システム、Laravel バージョン 6、Dell G3 コンピューター。

laravel での mix の使用方法

laravel mix のインストール

Laravel Mix はフロントエンドですタスク自動化管理ツール: ワークフロー モデルを使用して、指定されたタスクを順番に実行します。 Mix は、Laravel アプリケーションの Webpack コンパイル タスクを定義できるシンプルでスムーズな API を提供します。 Mix は多くの一般的な CSS および JavaScript プリプロセッサをサポートしており、単純な呼び出しでフロントエンド リソースを簡単に管理できます。

Mix の使用は非常に簡単で、まず次のコマンドを使用して npm の依存関係をインストールする必要があります。 Yarn を使用して依存関係をインストールします。その前に、国内ネットワークの理由により、Yarn のインストール アクセラレーションを構成する必要もあります:

yarn config set registry https://registry.npm.taobao.org

Yarn を使用して依存関係をインストールします:

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn

yarn の前にコマンド SASS_BINARY_SITE=http://npm.taabao.org/mirrors/node-sass を追加する目的は、Taobao ミラーから node-sass バイナリ ファイルをダウンロードするように Yarn に指示することです。

laravel mixを使用します

webpack.mix.jsファイルを変更します。

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();

最後に version() を追加して、ブラウザのキャッシュを避けるために、Mix によって生成された各静的ファイルの後にバージョン番号に似たパラメーターを追加します。

resources/sass/app.scss ファイルを変更します

// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
/* universal */
body {
  font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}
/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
……

npm run watch-poll を実行すると、css ファイルと js ファイルが生成されます。

view は

<link href="{{ mix(&#39;css/app.css&#39;) }}" rel="stylesheet">

バージョン管理を呼び出します

Mix はファイル public/mix-manifest.json も生成します。このファイルは .gitignore 内にリポジトリに追加する必要はありません追加してください。

/public/js および /public/css は動的に生成されるため、これらも無視されます。

変更 ** .gitignore ** ファイル:

/public/mix-manifest.json
/public/js
/public/css

関連する推奨事項: 最新の 5 つの Laravel ビデオ チュートリアル

以上がLaravelでのmixの使い方は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。