在laravel中，“l(fā)aravel mix”是一款前端任務(wù)自動(dòng)化管理工具，mix提供了簡(jiǎn)潔流暢的API，能夠?yàn)長(zhǎng)aravel應(yīng)用定義Webpack編譯任務(wù)，mix支持許多CSS與JavaScript預(yù)處理器，通過(guò)調(diào)用可以管理前端資源。

本文操作環(huán)境：Windows10系統(tǒng)、Laravel6版、Dell G3電腦。

laravel中mix的用法是什么

安裝 laravel mix

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

使用 Mix 很簡(jiǎn)單，首先你需要使用以下命令安裝 npm 依賴即可。我們將使用 Yarn 來(lái)安裝依賴，在這之前，因?yàn)閲?guó)內(nèi)的網(wǎng)絡(luò)原因，我們還需為 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.taobao.org/mirrors/node-sass 的目的是告訴 yarn 到淘寶的鏡像去下載 node-sass 二進(jìn)制文件。

使用 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();

在末尾加了一個(gè) version()，使 Mix 每次生成的靜態(tài)文件后面加上一個(gè)類似版本號(hào)的參數(shù)，避免瀏覽器緩存。

修改 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%; } ……

運(yùn)行 npm run watch-poll，然后會(huì)生成 css，js 文件。

view 調(diào)用

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

版本控制

Mix 還生成了 public/mix-manifest.json 這個(gè)文件，這也是不需要加入版本庫(kù)的，在 .gitignore 中添加進(jìn)去。

/public/js 和 /public/css 是動(dòng)態(tài)生成的，所以也加入忽略。

修改 ** .gitignore ** 文件：

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