?之前一直在用 Vue 或者 React 在寫 SPA 項(xiàng)目的時(shí)候，因?yàn)槭褂昧?Less 感覺很不錯(cuò)，現(xiàn)在轉(zhuǎn)回來寫純 css 的時(shí)候，感覺很難受(特別是寫很長(zhǎng)的選擇器時(shí))。?然后就分享一下在 HTML 靜態(tài)頁(yè)面中如何使用 Less(當(dāng)然你也可以使用 Sass 或者 Stylus)，以及實(shí)時(shí)更新。?如果你沒有用過 Gulp，請(qǐng)點(diǎn)擊這里?Gulp 官網(wǎng)^[1]

搭建項(xiàng)目目錄

?這個(gè)是我的 gulp-demo 的項(xiàng)目目錄。

創(chuàng)建 package.json

?使用 npm init 按照步驟往下走?或者使用 npm init -y 一鍵初始化 package.json 文件

npm init

安裝 Gulp 以及一些插件

?gulp：一個(gè)自動(dòng)化構(gòu)建工具，這里使用的是?Gulp@4.x^[2]，如果你之前用的是低于?Gulp@4.x^[3]?的版本，那會(huì)存在一定的區(qū)別。?gulp-autoprefixer：一個(gè)給你的 css 自動(dòng)添加瀏覽器前綴插件。?gulp-cssmin：一個(gè)壓縮 CSS 代碼的插件?gulp-file-include：一個(gè)可以導(dǎo)入多個(gè) HTML 代碼的插件，這個(gè)你的 HTML 的公共部分可以拆分出來。例如：footer.html、header.html等等。?gulp-htmlmin：一個(gè)壓縮 HTML 代碼的插件，當(dāng)你是處于前后端不分離的情況時(shí)，可以選擇不用。?gulp-less：一個(gè)識(shí)別 less 代碼的插件，類似于 webpack 里的 loader。?gulp-uglify：一個(gè)壓縮 JS 代碼的插件。?gulp-babel：一個(gè)轉(zhuǎn)譯es6代碼的插件?@babel/core：增加對(duì)es6的polyfill?@babel/preset-env：插件集合。?del：一個(gè)可以刪除文件的插件，主要用來讓你重新編譯時(shí)刪除之前的代碼，避免存在沖突。

npm i -D gulp gulp-autoprefixer gulp-cssmin gulp-file-include gulp-htmlmin gulp-less gulp-uglify gulp-babel @babel/core @babel/preset-env del

編寫配置文件及相關(guān)環(huán)境

?在 config 目錄下創(chuàng)建三個(gè)文件

?gulpfile.base.js：你的開發(fā)環(huán)境和生產(chǎn)環(huán)境都需要的公共方法或者是公共 task。?gulpfile.dev.js：開發(fā)環(huán)境需要的配置?gulpfile.prod.js：生產(chǎn)環(huán)境需要的配置

?在 package.json 里添加 scripts 命令

?start 命令，至于為啥不直接執(zhí)行 dev 命令，因?yàn)樗梢灾苯舆\(yùn)行npm start，少寫一個(gè) run。?dev 命令，開發(fā)環(huán)境命令，并且實(shí)時(shí)監(jiān)聽 html 文件和 less 文件的改變。?build 命令，打包項(xiàng)目命令。

{ "scripts":{ "start": "npm run dev", "dev": "gulp dev -f config/gulpfile.dev.js", "build": "gulp build -f config/gulpfile.prod.js" }}

如何實(shí)時(shí)更新

實(shí)時(shí)更新 CSS 文件

?使用 gulp 的 watch api 編寫你需要實(shí)時(shí)監(jiān)聽的文件就可以了，當(dāng)你的 less 文件改變時(shí)，它就會(huì)自動(dòng)編譯成 css。

實(shí)時(shí)更新 HTML 文件

?如果你用的是 vscode 編輯器的話，那就按照 EaseServer 插件即可，運(yùn)行快捷鍵：Ctrl + Shift + Enter?開發(fā)環(huán)境運(yùn)行你編譯的 dev/index.html 即可。

如果你覺得配置麻煩，那么可以直接下載我寫的這個(gè) gulp-demo 即可

?下載地址：gulp-demo^[4]?如何運(yùn)行看這個(gè) gulp-demo 的項(xiàng)目文檔 README.md(根目錄) 即可。?最后在這個(gè)發(fā)一條外鏈，你可以不用管這一句廢話：個(gè)人網(wǎng)站^[5]

References

[1]?Gulp 官網(wǎng):?https://www.gulpjs.com.cn/[2]?Gulp@4.x:?mailto:Gulp@4.x[3]?Gulp@4.x:?mailto:Gulp@4.x[4]?gulp-demo:?https://gitee.com/MINECASE/gulp-demo.git[5]?個(gè)人網(wǎng)站:?https://biaov.cn/

總結(jié)

以上是生活随笔為你收集整理的npm 安装less插件_Gulp 开发 HTML 静态页面和 Less 实时更新的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。