因為我也在不斷學習中，如果有總結的不到位的地方，請見諒，也樂意能夠和大家一起學習和進步。
less編譯成css的方法有好幾種，手動，自動，還有引入less.min.js壓縮檔案的,這裡我主要分享一下用gulp-less自動編譯方法
第一步：基於node.js的gulp,所有先安裝好node.js（怎樣測試是否安裝好，我在其他文章裡提了一下https://blog.csdn.net/weixin_36706903/article/details/80990568，後期有時間單獨寫一篇配置文章）
第二步：建專案檔案，這裡因為是要用gulp下面的gulp-less，所以重點說一下這方面的檔案搭建
1、package.json檔案可以在cmd中根目錄下輸入npm init自動生成，
根目錄下點選滑鼠右鍵+shift快捷鍵彈出選單，點選進入powershell,
powershell中,進入cmd同理
這裡也有簡單方法的，後面專門分享一篇專案搭建配置的方法
2、生成node_modules，cmd中輸入npm install
3、這裡注意package.json的配置，我用的外掛比較多，所以下的多，不要被嚇到了哈。這裡只需要把gulp和gulp-less下載好就能夠完成less編譯css了
在cmd中輸入命令
npm install gulp --save-dev 下載gulp
npm install gulp-less --save-dev 下載gulp-less
4、這裡注意路徑，根目錄最好是“爸爸”級別，避免後面執行任務的時候忽略了路徑報錯；注意gulpfiles.js檔名字不能改，必須這樣寫，主要是拿來引用gulp的任務以及執行任務（怎樣執行任務，我在其他文章中總結了二種方法，供參考https://blog.csdn.net/weixin_36706903/article/details/80990568）
5、引用gulp和gulp-less
const gulp=require("gulp")
const less=require("gulp-less")
6、測試gulp
執行結果如下：
7、我寫了二個任務，僅供參考
第1個任務目的：把靜態資源裡的less資料夾裡的所有less用less（）編譯，然後管道輸出到靜態資源下的css檔案
夾
//less檔案轉化
gulp.task("less_change_css",function(){
return gulp.src("src/public/less/
.less")
.pipe(less())
.pipe(gulp.dest("src/public/css"))
})
第2個任務目的：因為我寫了less我要看樣式是否正確，所有需要實時編譯成css檔案（這裡我的HTML中仍然是引用的css/xxx.css檔案哈）
這裡我用的gulp.watch（）方法
當我less資料夾中任何一個less結尾的檔案發生了改變，就執行我的第一個任務，即把我所有的less編譯成css
//監聽所有less發生變化，less_change_css執行，實時更新css
gulp.task("updateLess",function(){
return gulp.watch("src/public/less/.less",["less_change_css"])
})
執行結果如下：自動給我生成css以及裡面的css檔案
8、按照以上步驟，就實現了像寫原生Css一樣，能夠實時看到頁面的樣式效果
9、不足：這裡需要注意
當你的less語法錯誤，gulp任務就會報錯，以及停止監聽任何less檔案，所有偶爾瞟一瞟命令提示符中是否報錯
如果報錯，把，less語法改正確後，重新執行一下上面的gulp監聽任務就可以了
如果你的less比較好，就能夠從頭到尾都不會停下監聽
如果和我一樣偶爾會出現問題，那每天還是需要重新執行幾次任務的喲
希望對大家有幫助！！