laravel中mix的用法是什麼

在laravel中，「laravel mix」是一款前端任務自動化管理工具，mix提供了簡潔流暢的API，能夠為Laravel應用定義Webpack編譯任務，mix支援許多CSS與JavaScript預處理器，透過呼叫可以管理前端資源。

本文操作環境：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 href="{{ mix(&#39;css/app.css&#39;) }}" rel="stylesheet">

版本控制

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

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

修改 ** .gitignore ** 檔案：

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

相關推薦：最新的五個Laravel影片教學

以上是laravel中mix的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！