コンパイルリソース (ミックス)

• はじめに
• インストールと設定
• ミックスの実行
• スタイル シートの使用
  • Less
  • Sass
  • Stylus
  • PostCSS
  • Plain CSS
  • URL 処理
  • リソース マッピング
• JavaScript の使用
  • #ベンダー抽出
  • React
  • #Vanilla JS
  #カスタム Webpack 構成
  #ファイルとディレクトリのコピー
• バージョン管理/キャッシュのクリア
• ブラウザ同期の再ロード
• ##環境変数
• ##通知

##はじめに

#インストールと設定

トリガーミックスの前にこの際、Node.js と NPM がマシンにインストールされていることを確認してください。

node -v
npm -v

から入手できる、より使いやすいグラフィカル インストールを使用することもできます。 Node と NPM の最新バージョン。

Laravel Mixあとは、Laravel Mix をインストールするだけです。 Laravel のクリーン インストールでは、

ファイルには、開始するために必要なものがすべて含まれています。 PHP ではなく Node の依存関係を定義する点を除いて、

ファイルと同じように考えてください。次のコマンドを実行して、参照する依存関係をインストールします:

npm install

Running Mix

Mix は Webpack の最上位構成であるため、Mix タスクを実行するには、Laravel のデフォルトの に含まれる 1 行を実行するだけで済みます。 package.json ファイル スクリプト:

// 运行 Mix 任务...
npm run dev
// 运行所有的 Mix 任务并最小化输出结果...
npm run production

リソースの変更をリッスン

npm run watch コマンドはターミナルで引き続き実行できます。関連ファイルの変更を監視します。 Webpack は、変更を検出するとリソースを自動的に再コンパイルします。

npm run watch

特定の状況では、ファイルを変更しても Webpack の更新が要求されないことがわかります。システムでこの状況が発生した場合は、watch-poll コマンドの使用を検討してください:

npm run watch-poll

スタイル シートの使用

webpack.mix.js ファイル内のすべてのリソースをコンパイルするためのエントリ ポイント。これは、Webpack の軽量構成ラッパーと考えてください。混合タスクは、リソースのコンパイル方法の構成と連鎖させることができます。

メソッドを使用して Less をコンパイルできます。 CSSに。次のステートメントは、app.less ファイルを public/css/app.css にコンパイルします。

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

を呼び出すことで作成できます。メソッドを複数回実行する 複数ファイルのコンパイルを完了する:

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

メソッドに渡すことができます:

mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

をオーバーライドする必要がある場合は、mix.less() の 3 番目のパラメーターとしてオブジェクトを渡すことができます。

mix.less('resources/less/app.less', 'public/css', {
    strictMath: true
  });

sass

Sass を CSS にコンパイルします。このメソッドは次のように使用できます:

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

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

mix.sass('resources/sass/app.sass', 'public/css', {
    precision: 5
  });

stylus

Stylus を CSS にコンパイルします:

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

npm install rupture)、次に mix.stylus() を呼び出すときにプラグインを含めます:

mix.stylus('resources/stylus/app.styl', 'public/css', {  
  use: [       
   require('rupture')()  
   ]
 });

##

PostCSS

PostCSS は CSS を変換するための強力なツールであり、Laravel Mix に含まれています。デフォルトでは、Mix は人気のある Autoprefixer プラグインを使用して、必要なすべての CSS3 サードパーティ プレフィックスを自動的に追加します。ただし、アプリに必要なプラグインを自由に追加できます。まず、NPM を通じて必要なプラグインをインストールし、次に webpack.mix.js ファイルを参照します:

mix.sass('resources/sass/app.scss', 'public/css') 
   .options({
        postCss: [        
            require('postcss-css-variables')()    
              ] 
           });

styles メソッドを使用できます。

mix.styles([  
  'public/css/vendor/normalize.css',    
  'public/css/vendor/videojs.css'], 
  'public/css/all.css'
 );

Webpack 上に構築されているため、Webpack のいくつかの概念を理解することが重要です。 CSS コンパイルの場合、Webpack はスタイルシートを使用して

呼び出しを書き換えて最適化します。最初は奇妙に聞こえるかもしれませんが、これは確かに強力な機能です。画像への相対 URL を含む Sass をコンパイルしたいとします。

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

url()

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

デフォルトでは、Laravel Mix と Webpack は

を見つけて public/images フォルダーにコピーし、生成された ## をオーバーライドします。スタイルシートの #url()。これが完了すると、コンパイルされた CSS は次のようになります。

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

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

またはリソースをパブリック ディレクトリにコピーします。つまり、コンパイルされた CSS は、最初に入力したものと同じように見えます。

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

#ソース マップ##マッピングはデフォルトでは無効になっていますが、

メソッドを呼び出すことで有効にできます。コンパイル/実行のコストは増加しますが、リソースのコンパイル時にブラウザ開発ツールに追加のデバッグ情報を提供できます。

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

JavaScript の操作

Mix は、ECMAScript 2015 のコンパイル、モジュールのパッケージ化、ネイティブ JavaScript ファイルの最小化とマージなど、JavaScript ファイルの操作を容易にするいくつかの機能を提供します。さらに良いことに、これらはすべて、設定を必要とせずにうまく機能します。

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

このコード行だけで、

ベンダー抽出

アプリケーション独自の JavaScript とサードパーティのライブラリをバインドします。これは潜在的な欠点です。長期的なキャッシュが困難になります。たとえば、アプリケーション コードを個別に更新すると、サードパーティ ライブラリが変更されていない場合でも、ブラウザはすべてのサードパーティ ライブラリを強制的に再ダウンロードします。

アプリケーションの JavaScript を頻繁に更新する予定がある場合は、サードパーティのライブラリを独自のファイルに抽出することを検討する必要があります。こうすることで、アプリケーション コードへの変更は vendor.js ファイル キャッシュに影響を与えません。 Mix の extract メソッドはこれに便利です。

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

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

JavaScript エラーを回避するには、これらのファイルが適切な順序でロードされていることを確認してください:

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

React

Mix は、React サポートに必要な Babel プラグインを自動的にインストールできます。これを実現するには、mix.js() を mix.react() に置き換えるだけです。

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

Mix はバックグラウンドでダウンロードされ、該当する babel-preset-react Babel プラグイン。

Vanilla JS

は、mix.styles() を使用したスタイル シートの統合に似ています。 scripts() メソッドを使用して、任意の数の JavaScript ファイルを統合および縮小することもできます:

mix.scripts([   
 'public/js/admin.js',    
 'public/js/dashboard.js'],
 'public/js/all.js'
 );

このオプションは、Webpack を使用して JavaScript をコンパイルする必要がない従来のコードに特に役立ちます。

{ヒント} mix.babel() は、mix.scripts() の小さなバリアントです。そのメソッド シグネチャは scripts とまったく同じですが、統合されたファイルは Babel によってコンパイルされ、ES2015 コードがブラウザが理解できるバニラ JavaScript に変換されます。

カスタム Webpack 構成

Lavarel Mix は、事前に構成された webpack.config.js ファイルを舞台裏で参照して、起動と操作を高速化します。場合によっては、このファイルを手動で編集する必要があるかもしれません。参照する必要がある特別なローダーまたはプラグインがある場合や、Sass の代わりに Stylus を使用したい場合があります。この場合、2 つのオプションがあります。

カスタム構成をマージする

Mix は、短い Webpack 構成をマージして既存のものを上書きする webpackConfig メソッドを提供します。構成。これは、webpack.config.js の独自のコピーをコピーして管理する必要がないため、非常に魅力的なオプションです。 webpackConfig メソッドは、適用する Webpack 固有の構成 、

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

カスタム構成ファイル # を含むオブジェクトをパラメータとして受け入れます。

node_modules/laravel-mix/setup/webpack.config.js ファイルをプロジェクトのルート ディレクトリにコピーします。次に、package.json ファイル内のすべての --config 参照が、新しくコピーされた構成ファイルを指すようにします。この方法で構成をカスタマイズすることを選択した場合は、Mix webpack.config.js に対する後続の更新をカスタム構成ファイルに手動でマージする必要があります。

メソッドを使用して、ファイルとディレクトリをコピーできます。新しい場所へ。この方法は、node_modules ディレクトリ内の特別なリソースを public フォルダーに再配置する必要がある場合に便利です。

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

メソッドはディレクトリ構造を平坦化します。ディレクトリの元の構造を維持したい場合は、copyDirectory メソッドを使用する必要があります:

mix.copyDirectory('resources/img', 'public/img');

version

version

mix関数を使用して、対応するハッシュリソースをロードする必要があります。 mix

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

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

Browsersync reload

BrowserSync は、ファイルの変更を自動的に検出し、手動で更新せずにブラウザに変更を挿入できます。 mix.browserSync() メソッドを呼び出して、このサポートを有効にすることができます。

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
   }

このメソッドに文字列 (プロキシ) またはオブジェクト Y (BrowserSync 設定) を渡すことができます。次に、npm run watch コマンドを使用して、Webpack 開発サーバーを起動します。スクリプトまたは PHP ファイルを再度編集すると、変更に応じてブラウザがすぐに更新されることがわかります。

.env に MIX_ を追加することで追加できます。ファイル プレフィックス、環境変数を Mix に挿入します:

mix.browserSync('my-domain.test');
// 或...
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
  });

.env ファイルで定義されると、プロセスを使用してアクセスできるようになります。 env それをオブジェクト化します。 watch タスクの実行中にこの値が変更された場合は、タスクを再起動する必要があります:

MIX_SENTRY_DSN_PUBLIC=http://example.com

利用可能な場合、Mix はバインドごとにオペレーティング システムの通知を自動的に表示します。これにより、コンパイルが成功したかどうかに関するリアルタイムのフィードバックが得られます。ただし、通知を無効にしたい場合もあります。例としては、運用サーバー上で Mix をトリガーすることが挙げられます。通知は、

メソッドを使用して無効にできます。

process.env.MIX_SENTRY_DSN_PUBLIC