?之前一直在用 Vue 或者 React 在寫 SPA 項目的時候，因為使用了 Less 感覺很不錯，現在轉回來寫純 css 的時候，感覺很難受(特別是寫很長的選擇器時)。?然后就分享一下在 HTML 靜態頁面中如何使用 Less(當然你也可以使用 Sass 或者 Stylus)，以及實時更新。?如果你沒有用過 Gulp，請點擊這里?Gulp 官網^[1]

搭建項目目錄

?這個是我的 gulp-demo 的項目目錄。

創建 package.json

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

npm init

安裝 Gulp 以及一些插件

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

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

編寫配置文件及相關環境

?在 config 目錄下創建三個文件

?gulpfile.base.js：你的開發環境和生產環境都需要的公共方法或者是公共 task。?gulpfile.dev.js：開發環境需要的配置?gulpfile.prod.js：生產環境需要的配置

?在 package.json 里添加 scripts 命令

?start 命令，至于為啥不直接執行 dev 命令，因為它可以直接運行npm start，少寫一個 run。?dev 命令，開發環境命令，并且實時監聽 html 文件和 less 文件的改變。?build 命令，打包項目命令。

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

如何實時更新

實時更新 CSS 文件

?使用 gulp 的 watch api 編寫你需要實時監聽的文件就可以了，當你的 less 文件改變時，它就會自動編譯成 css。

實時更新 HTML 文件

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

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

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

References

[1]?Gulp 官網:?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]?個人網站:?https://biaov.cn/

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。