因為我也在不斷學習中,如果有總結的不到位的地方,請見諒,也樂意能夠和大家一起學習和進步。
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,
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/be8cfe026edab449ad939b6bb0659a09a4d3b718f2b4dc018fc5d069a81cc96d.png)
powershell中,進入cmd同理
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/df2af77c4eaa21cdb58a071aed96b404f2eb0b7328e7496334086b7751a36a99.png)
這裡也有簡單方法的,後面專門分享一篇專案搭建配置的方法
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
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/efea58115f474012560aa5169b2469376fead4b7a6d4e35f053602027a17f8fc.png)
4、這裡注意路徑,根目錄最好是“爸爸”級別,避免後面執行任務的時候忽略了路徑報錯;注意gulpfiles.js檔名字不能改,必須這樣寫,主要是拿來引用gulp的任務以及執行任務(怎樣執行任務,我在其他文章中總結了二種方法,供參考https://blog.csdn.net/weixin_36706903/article/details/80990568)
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/0ffd9c5799594262fc9247bcaf47912ee3dbcd14e85ebcb8d58e026f01c5f56d.png)
5、引用gulp和gulp-less
const gulp=require("gulp")
const less=require("gulp-less")
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/635f9c1e3341ecaefb0e798ce98c3cde204927d2aed1d73997962f9a62634173.png)
6、測試gulp
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/f1c8968e265c4da8686cba787a63a15d040f439e8edb56895c7d614649439133.png)
執行結果如下:
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/a86f940f6eb08db5688db53b422e3ae24347a77ec92b28d168d5a4262af55fb2.png)
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"])
})
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/5a3cc2bf078c48ac4cff7abc874345beeda8eee9cfa066a22e278f24d42871a3.png)
執行結果如下:自動給我生成css以及裡面的css檔案
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/476602025166aea274331ecd1e402003b0d32abe6faac9b2cb6015c0f60c5b91.png)
8、按照以上步驟,就實現了像寫原生Css一樣,能夠實時看到頁面的樣式效果
9、不足:這裡需要注意
當你的less語法錯誤,gulp任務就會報錯,以及停止監聽任何less檔案,所有偶爾瞟一瞟命令提示符中是否報錯
如果報錯,把,less語法改正確後,重新執行一下上面的gulp監聽任務就可以了
如果你的less比較好,就能夠從頭到尾都不會停下監聽
如果和我一樣偶爾會出現問題,那每天還是需要重新執行幾次任務的喲
![vscode的gulp-less自動把less編譯成css](https://i.iter01.com/images/9a7cf80ddbc3c8fc19832cd5c1e213099d0364a0a4aa5de4161ebc8ae34172ae.png)
希望對大家有幫助!!