laravel中mix怎么用

這篇文章主要為大家展示了“l(fā)aravel中mix怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“l(fā)aravel中mix怎么用”這篇文章吧。

成都創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站建設(shè)、網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元獨山做網(wǎng)站,已為上家服務(wù),為獨山各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

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

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

安裝 laravel mix

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

使用 Mix 很簡單，首先你需要使用以下命令安裝 npm 依賴即可。我們將使用 Yarn 來安裝依賴，在這之前，因為國內(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 二進制文件。

使用 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 每次生成的靜態(tài)文件后面加上一個類似版本號的參數(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%;
}
……

運行 npm run watch-poll，然后會生成 css，js 文件。

view 調(diào)用

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

版本控制

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

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

修改 ** .gitignore ** 文件：

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

以上是“l(fā)aravel中mix怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前題目：laravel中mix怎么用
本文路徑：http://muchs.cn/article0/ijopoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、ChatGPT、云服務(wù)器、微信小程序、網(wǎng)站排名、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容