laravel中mix的用法是什么

laravel中,“laravel mix”是一款前端任務自動化管理工具,mix提供了簡潔流暢的API,能夠為Laravel應用定義Webpack編譯任務,mix支持許多CSS與JavaScript預處理器,通過調用可以管理前端資源。

laravel中mix的用法是什么

本文操作環境:Windows10系統、Laravel6版、Dell G3電腦。

laravel中mix的用法是什么

安裝 laravel mix

Laravel Mix 一款前端任務自動化管理工具,使用了工作流的模式對制定好的任務依次執行。Mix 提供了簡潔流暢的 API,讓你能夠為你的 Laravel 應用定義 Webpack 編譯任務。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.taobao.org/mirrors/node-sass 的目的是告訴 yarn 到淘寶的鏡像去下載 node-sass 二進制文件。

使用 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>

版本控制

Mix 還生成了 public/mix-manifest.json 這個文件,這也是不需要加入版本庫的,在 .gitignore 中添加進去。

/public/js 和 /public/css 是動態生成的,所以也加入忽略。

修改 ** .gitignore ** 文件:

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

相關推薦:最新的五個Laravel視頻教程

以上就是

? 版權聲明
THE END
喜歡就支持一下吧
點贊9 分享