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，因此重點說一下這方面的文件搭建

一、package.json文件能夠在cmd中根目錄下輸入npm init自動生成，

根目錄下點擊鼠標右鍵+shift快捷鍵彈出菜單，點擊進入powershell,

powershell中,進入cmd同理

這裏也有簡單方法的，後面專門分享一篇項目搭建配置的方法

二、生成node_modules，cmd中輸入npm install

三、這裏注意package.json的配置，我用的插件比較多，因此下的多，不要被嚇到了哈。這裏只須要把gulp和gulp-less下載好就可以完成less編譯css了

在cmd中輸入命令

npm install gulp --save-dev 下載gulp

npm install gulp-less --save-dev 下載gulp-less

四、這裏注意路徑，根目錄最好是「爸爸」級別，避免後面執行任務的時候忽略了路徑報錯；注意gulpfiles.js文件名字不能改，必須這樣寫，主要是拿來引用gulp的任務以及執行任務（怎樣執行任務，我在其餘文章中總結了二種方法，供參考https://blog.csdn.net/weixin_36706903/article/details/80990568）

五、引用gulp和gulp-less

const gulp=require("gulp")

const less=require("gulp-less")

六、測試gulp

執行結果以下：

七、我寫了二個任務，僅供參考

第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文件

八、按照以上步驟，就實現了像寫原生Css同樣，可以實時看到頁面的樣式效果

九、不足：這裏須要注意

當你的less語法錯誤，gulp任務就會報錯，以及中止監放任何less文件，全部偶爾瞟一瞟命令提示符中是否報錯

若是報錯，把，less語法改正確後，從新執行一下上面的gulp監放任務就能夠了

若是你的less比較好，就可以從頭至尾都不會停下監聽

若是和我同樣偶爾會出現問題，那天天仍是須要從新執行幾回任務的喲

但願對你們有幫助！！