vscode的gulp-less自動把less編譯成css

因為我也在不斷學習中，如果有總結的不到位的地方，請見諒，也樂意能夠和大家一起學習和進步。 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比較好，就能夠從頭到尾都不會停下監聽 如果和我一樣偶爾會出現問題，那每天還是需要重新執行幾次任務的喲

希望對大家有幫助！！