laravel mix用于管理前端任務(wù)，它是一款前端任務(wù)自動化管理工具，可使用工作流的模式對制定好的任務(wù)依次執(zhí)行；Mix提供了簡潔流暢的API，讓開發(fā)者能夠為Laravel應(yīng)用定義webpack編譯任務(wù)，可以輕松地管理前端資源。
本教程操作環(huán)境：windows7系統(tǒng)、Laravel6版，DELL G3電腦。
laravel mix是什么？有什么用？
Laravel Mix 一款前端任務(wù)自動化管理工具，使用了工作流的模式對制定好的任務(wù)依次執(zhí)行。Mix 提供了簡潔流暢的 API，讓你能夠為你的 Laravel 應(yīng)用定義 Webpack 編譯任務(wù)。Mix 支持許多常見的 css 與 JavaScript 預(yù)處理器，通過簡單的調(diào)用，你可以輕松地管理前端資源。
默認文件和文件夾結(jié)構(gòu)
默認 sass 文件在 Resources/assets/sass/app.scss ?中（文件的內(nèi)容是完全一樣的），而默認的 JS 文件在 resources/assets/js/app.js（因為文件是完全相同的，所以想要學(xué)習(xí)更多關(guān)于 Vue 在 5.3 中的基礎(chǔ)結(jié)構(gòu)，可以查看?Matt Stauffer?寫的 Matt Stauffer 這一帖子）。
如果你深入到 app.js 中引用的 bootstrap 文件（ resources/assets/js/bootstrap.js ），你會看到我們使用Axios 而不是 Vue-Resource 來設(shè)置 X-csrf-Token（ Matt Stauffer）。
如果你在 Mix 的項目上運行 npm run dev，可以看到：
默認情況下，我們生成的文件的位置與 Elixir 相同：public/css/app.css ?和 public/js/app.js 。
主要 Mix 方法
正如你所見，你可以輕松的使用 Mix 處理 Sass 和 JS。Sass，顯而易見，運行 Sass 文件，并將其輸出為 CSS。用 ?JS 方法支持 ecmascript 2015 語法、編譯 .vue 文件、針對生產(chǎn)環(huán)境壓縮代碼以及對 JavaScript 文件進行其他處理。
還可以用 .less 方法將?Matt Stauffer?編譯為 CSS：
mix.less('resources/assets/less/app.less', 'public/css');
用 combine 方法將文件組合在一起：
mix.combine([ 'public/css/vendor/jquery-ui-one-thing.css', 'public/css/vendor/jquery-ui-another-thing.css' ], 'public/css/vendor.css');
用 copy?復(fù)制文件或目錄：
mix.copy('node_modules/jquery-ui/some-theme-thing.css', 'public/css/some-jquery-ui-theme-thing.css'); mix.copy('node_modules/jquery-ui/css', 'public/css/jquery-ui');
與 Elixir 不同，Source Maps 默認情況下是關(guān)閉的，可以在 webpack.mix.js 中調(diào)用以下方法來開啟：
mix.sourceMaps();
默認情況下 Mix 會以系統(tǒng)通知的方式告知你編譯結(jié)果，如果不希望它們運行，可以使用 disableNotifications() 方法禁用。
Mix.manifest.json ?和 緩存清除
熟悉 Elixir 的人可能會注意到上面的輸出圖像有一點與 Elixir 不同：Mix 正在生成一個開箱即用的清單文件 public/mix-manifest.json。 當然，Elixir 也會生成清單文件：public/build/rev-manifest.json，與 Mix 直接生產(chǎn)不同，它只會在確定啟用了緩存清除（版本控制）的功能時生成它。
這些清單文件是用來映射前端文件與已經(jīng)版本化處理的前端文件副本，例如： /js/app.js 與 /js/app-86ff5d31a2.js 之間的映射。有了這個文件就可以在 HTLM 用簡單的引用指向該引用的版本化文件。例如
不像 Elixir，即使你不使用緩存清除，Mix 都會生成這個文件，但它也僅僅只是一個導(dǎo)向地圖：
{ "/js/app.js": "/js/app.js", "/css/app.css": "/css/app.css" }
對于以前使用 Elixir 的用戶來說，另一個有趣的變化是：你的構(gòu)建文件現(xiàn)在最終在正常的輸出目錄，而不是單獨的構(gòu)建目錄，所以你版本化的 JS 文件，將出現(xiàn)在 public/js/app-86ff5d31a2.js。
要在 Mix 中啟用緩存清除，只需在 Mix 文件中附加 .version()：
mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .version();
這比傳遞實際文件名要簡單得多，就像在 Elixir 中一樣。
mix() 幫助
正如上面提到的，你要使用 mix() 來代替 elixir() 引用你的資源，運行方式完全相同。 但是有一點，用 Mix 的話，要刪除 Laravel 模板中默認的這些引用行：
<link href="/css/app.css" rel="stylesheet"> ... <script src="/js/app.js"></script>
用下面這種方式替換它們：
<link href="{{ mix('/css/app.css') }}" rel="stylesheet"> ... <script src="{{ mix('/js/app.js') }}"></script>
記住，這個函數(shù)只是在 mix-manifest.json ?中查找字符串并返回映射的構(gòu)建文件。用來保證當你清除了緩存時，它懂得去加載默認的那個文件。
代碼拆分
Webpack 是對許多人來說很令人興奮的部分，因為它提供了使代碼結(jié)構(gòu)化的智能能力。我還沒能完全弄明白 webpack 的所有功能，Mix 也沒把所有功能都打包支持，例如：tree-shaking。但它確實使你的自定義代碼（它可能會經(jīng)常更改）與你的供應(yīng)商代碼（這不應(yīng)該）區(qū)分，使得用戶在每次推送新版本時刷新所有供應(yīng)商代碼的可能性更小。
要利用這個特性，你需要使用 extract() 函數(shù)，它將你定義一個給定的庫或者模塊集合提取到一個單獨的構(gòu)建文件名為 vendor.js：
mix.js('resources/assets/js/app.js', 'public/js') .extract(['vue', 'jquery']);
在這種情況下，Mix 生成了三個文件：public/js/app.js 、public/js/vendor.js ?和第三個 Webpack 特定文件 public/js/manifest.js。 為了運行順利，得按照以下的順序引入這三個文件：
<script src="{{ mix('/js/manifest.js') }}"></script> <script src="{{ mix('/js/vendor.js') }}"></script> <script src="{{ mix('/js/app.js') }}"></script>
如果清除了緩存，并且更改了應(yīng)用自定義的代碼， vendor.js ?文件仍會緩存，也只有應(yīng)用自定義的代碼才會被清除緩存，這樣你的網(wǎng)站會加載得更快。
自定義 Webpack 配置
如果你有興趣添加自己的自定義 Webpack 配置，只需要傳遞你的 Webpack 配置：
mix.webpackConfig({ resolve: { modules: [ path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js') ] } });
（上面這個例子只是從文檔復(fù)制粘貼來的~ 你真的有興趣就自己去了解哈~）
順便一提
說點有趣的東西吧，我想這或許能在 Webpack 文件中加點什么。 如果你想只在生產(chǎn)環(huán)境下復(fù)制點什么，你怎么會這樣做？
會這么問是因為我發(fā)現(xiàn)在 Node 環(huán)境對象中，我們可以用 process.env 去訪問。可以檢查任何值，包括系統(tǒng)上的任何全局環(huán)境變量。這個發(fā)現(xiàn)可能可以讓我們?nèi)プ鳇c其他有趣的事情，比如說有條件地檢查 process.env.NODE_ENV ?中的值：
if (process.env.NODE_ENV == 'production') { mix.webpackConfig({ ... }); }
但是在閱讀源代碼后，我發(fā)現(xiàn) NODE_ENV 不是主要的檢查。相反，是用了一個帶有 inProduction ?標志的配置對象去做這件事情。 這個文檔里沒有寫，因此請謹慎使用，但你可以更新 Webpack 文件頂部的導(dǎo)入，然后使用該配置對象：
const { mix, config } = require('laravel-mix'); if (config.inProduction) { mix.webpackConfig({ ... }); }
默認依賴關(guān)系
你可以查看 package.json ?并查看每個項目包含的依賴項列表。 記住，這些是由默認的 app.js 和 bootstrap.js ?來引用的，你可以刪除 app.js ?和 package.json ?中的引用，并重新運行 npm install ，當然刪除引用并不會刪除源文件。
-
Matt Stauffer（一個簡單且漂亮的 http 客戶端）
-
Matt Stauffer（由默認的 app.scss ?文件來引入 Bootstrap 樣式）
-
Matt Stauffer（ 比 Underscore 更好）
小結(jié)
Laravel Mix 是一個代替 Laravel Elixir 的構(gòu)建工具。 具有與 Elixir 幾乎相同的API，卻是基于 Webpack 而不是 gulp。? ? ? ? ? ? ?
【相關(guān)推薦：Matt Stauffer】
