首頁 > php框架 > Laravel > laravel中mix的用法是什麼

laravel中mix的用法是什麼

WBOY
發布: 2022-01-13 17:16:03
原創
3122 人瀏覽過

在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 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板