laravel mix用於管理前端任務(wù)，它是一款前端任務(wù)自動(dòng)化管理工具，可使用工作流程的模式對(duì)制定好的任務(wù)依次執(zhí)行；Mix提供了簡(jiǎn)潔流暢的API，讓開發(fā)者能夠?yàn)長(zhǎng)aravel應(yīng)用程式定義Webpack編譯任務(wù)，可以輕鬆管理前端資源。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、Laravel6版，DELL G3電腦。

laravel mix是什麼？有什麼用？

Laravel Mix 一款前端任務(wù)自動(dòng)化管理工具，使用了工作流程的模式對(duì)制定好的任務(wù)依序執(zhí)行。 Mix 提供了簡(jiǎn)潔流暢的 API，讓你能為你的 Laravel 應(yīng)用程式定義 Webpack 編譯任務(wù)。 Mix 支援許多常見的 CSS 與 JavaScript 預(yù)處理器，透過簡(jiǎn)單的調(diào)用，你可以輕鬆地管理前端資源。

預(yù)設(shè)檔案和資料夾結(jié)構(gòu)

預(yù)設(shè)Sass 檔案在resources/assets/sass/app.scss ?中（檔案的內(nèi)容完全一樣的），而預(yù)設(shè)的JS 檔案在resources/assets/js/app.js（因?yàn)闄n案是完全相同的，所以想要學(xué)習(xí)更多關(guān)於Vue 在5.3 中的基礎(chǔ)結(jié)構(gòu)，可以查看Matt Stauffer?寫的5.3 的前端結(jié)構(gòu) 這篇文章）。

如果你深入到app.js 中引用的bootstrap 檔案（ resources/assets/js/bootstrap.js ），你會(huì)看到我們使用Axios 而不是Vue-Resource 來設(shè)置X-CSRF-TOKEN（ Vue-Resource 在2016 年後將不再工作）。

如果你在Mix 的專案上執(zhí)行npm run dev，可以看到：

預(yù)設(shè)情況下，我們產(chǎn)生的檔案的位置與Elixir 相同：public/css/app.css ?和public/js/app.js 。

主要 Mix 方法

正如你所見，你可以輕鬆的使用 Mix 處理 Sass 和 JS。 Sass，顯而易見，運(yùn)行 Sass 文件，並將其輸出為 CSS。以 ?JS 方法支援 ECMAScript 2015 語法、編譯 .vue 檔案、針對(duì)生產(chǎn)環(huán)境壓縮程式碼以及對(duì) JavaScript 檔案進(jìn)行其他處理。

也可以用.less 方法將?Less?編譯為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?複製檔案或目錄：

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 預(yù)設(shè)是關(guān)閉的，可以在webpack.mix .js 中呼叫以下方法來開啟：

mix.sourceMaps();

預(yù)設(shè)情況下Mix 會(huì)以系統(tǒng)通知的方式告知你編譯結(jié)果，如果不希望它們運(yùn)行，可以使用disableNotifications() 方法禁用。

Mix.manifest.json ?和快取清除

熟悉Elixir 的人可能會(huì)注意到上面的輸出圖像有一點(diǎn)與Elixir 不同： Mix 正在產(chǎn)生一個(gè)開箱即用的清單檔案public/mix-manifest.json。當(dāng)然，Elixir 也會(huì)產(chǎn)生清單檔案：public/build/rev-manifest.json，與 Mix 直接生產(chǎn)不同，它只會(huì)在確定啟用了快取清除（版本控制）的功能時(shí)產(chǎn)生它。

這些清單檔案是用來對(duì)應(yīng)前端檔案與已經(jīng)版本化處理的前端檔案副本，例如： /js/app.js 與/js/app-86ff5d31a2. js 之間的對(duì)應(yīng)。有了這個(gè)檔案就可以在 HTLM 用簡(jiǎn)單的引用指向該引用的版本化檔案。例如 <script src="%7B%7B%20mix('js/app.js')%20%7D%7D"></script> 。

不像Elixir，即使你不使用快取清除，Mix 都會(huì)產(chǎn)生這個(gè)文件，但它也只是一個(gè)導(dǎo)向地圖：

{
??"/js/app.js":?"/js/app.js",
??"/css/app.css":?"/css/app.css"
}

對(duì)於以前使用Elixir 的用戶來說，另一個(gè)有趣的變化是：你的構(gòu)建文件現(xiàn)在最終在正常的輸出目錄，而不是單獨(dú)的構(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();

這比傳遞實(shí)際檔案名稱要簡(jiǎn)單得多，就像在Elixir 中一樣。

mix() 幫助

如同上面提到的，你要用 mix() 來取代 elixir() 來引用你的資源，運(yùn)作方式完全相同。但有一點(diǎn)，用Mix 的話，要?jiǎng)h除Laravel 模板中預(yù)設(shè)的這些引用行：

<link>
...
<script></script>

用下面這種方式替換它們：

<link>
...
<script></script>

記住，這個(gè)函數(shù)只是在mix-manifest.json ?中尋找字串並傳回已對(duì)應(yīng)的建置檔案。用來保證當(dāng)你清除了快取時(shí)，它懂得去載入預(yù)設(shè)的那個(gè)檔案。

代碼拆分

Webpack 是對(duì)許多人來說很令人興奮的部分，因?yàn)樗峁┝耸勾a結(jié)構(gòu)化的智能能力。我還沒能完全弄明白 webpack 的所有功能，Mix 也沒把所有功能都打包支持，例如：tree-shaking。但它確實(shí)使你的自定義代碼（它可能會(huì)經(jīng)常更改）與你的供應(yīng)商代碼（這不應(yīng)該）區(qū)分，使得用戶在每次推送新版本時(shí)刷新所有供應(yīng)商代碼的可能性更小。

要利用這個(gè)特性，你需要使用 extract() 函數(shù)，它將你定義一個(gè)給定的庫(kù)或者模塊集合提取到一個(gè)單獨(dú)的構(gòu)建文件名為 vendor.js：

mix.js('resources/assets/js/app.js',?'public/js')
????.extract(['vue',?'jquery']);

在這種情況下，Mix 生成了三個(gè)文件：public/js/app.js 、public/js/vendor.js ?和第三個(gè) Webpack 特定文件 public/js/manifest.js。 為了運(yùn)行順利，得按照以下的順序引入這三個(gè)文件：

<script></script>
<script></script>
<script></script>

如果清除了緩存，并且更改了應(yīng)用自定義的代碼， vendor.js ?文件仍會(huì)緩存，也只有應(yīng)用自定義的代碼才會(huì)被清除緩存，這樣你的網(wǎng)站會(huì)加載得更快。

自定義 Webpack 配置

如果你有興趣添加自己的自定義 Webpack 配置，只需要傳遞你的 Webpack 配置：

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

（上面這個(gè)例子只是從文檔復(fù)制粘貼來的~ 你真的有興趣就自己去了解哈~）

順便一提

說點(diǎn)有趣的東西吧，我想這或許能在 Webpack 文件中加點(diǎn)什么。 如果你想只在生產(chǎn)環(huán)境下復(fù)制點(diǎn)什么，你怎么會(huì)這樣做？

會(huì)這么問是因?yàn)槲野l(fā)現(xiàn)在 Node 環(huán)境對(duì)象中，我們可以用 process.env 去訪問。可以檢查任何值，包括系統(tǒng)上的任何全局環(huán)境變量。這個(gè)發(fā)現(xiàn)可能可以讓我們?nèi)プ鳇c(diǎn)其他有趣的事情，比如說有條件地檢查 process.env.NODE_ENV ?中的值：

if?(process.env.NODE_ENV?==?'production')?{
????mix.webpackConfig({?...?});
}

但是在閱讀源代碼后，我發(fā)現(xiàn) NODE_ENV 不是主要的檢查。相反，是用了一個(gè)帶有 inProduction ?標(biāo)志的配置對(duì)象去做這件事情。 這個(gè)文檔里沒有寫，因此請(qǐng)謹(jǐn)慎使用，但你可以更新 Webpack 文件頂部的導(dǎo)入，然后使用該配置對(duì)象：

const?{?mix,?config?}?=?require('laravel-mix');

if?(config.inProduction)?{
????mix.webpackConfig({?...?});????
}

默認(rèn)依賴關(guān)系

你可以查看 package.json ?并查看每個(gè)項(xiàng)目包含的依賴項(xiàng)列表。 記住，這些是由默認(rèn)的 app.js 和 bootstrap.js ?來引用的，你可以刪除 app.js ?和 package.json ?中的引用，并重新運(yùn)行 npm install ，當(dāng)然刪除引用并不會(huì)刪除源文件。

• Axios（一個(gè)簡(jiǎn)單且漂亮的 HTTP 客戶端）

• Bootstrap Sass（由默認(rèn)的 app.scss ?文件來引入 Bootstrap 樣式）

• jQuery

• Lodash（ 比 Underscore 更好）

• Vue 2

小結(jié)

Laravel Mix 是一個(gè)代替 Laravel Elixir 的構(gòu)建工具。 具有與 Elixir 幾乎相同的API，卻是基于 Webpack 而不是 Gulp。? ? ? ? ? ? ?

【相關(guān)推薦：laravel視頻教程】

以上是laravel mix有什麼用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！