微信小程序?qū)崟r(shí)監(jiān)聽(tīng)less文件編譯成wxss文件的示例-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)微信小程序?qū)崟r(shí)監(jiān)聽(tīng)less文件編譯成wxss文件的示例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元荔灣做網(wǎng)站,已為上家服務(wù),為荔灣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

我們的微信小程序項(xiàng)目選擇的技術(shù)棧是：原生 + 內(nèi)嵌h6，技術(shù)選型沒(méi)毛病，就是覺(jué)得哪里怪怪的。同樣的設(shè)計(jì)稿，通常h6開(kāi)發(fā)比小程序開(kāi)發(fā)快，郁悶，為啥呀？小程序提供了很多封裝好的組件，為什么開(kāi)發(fā)起來(lái)還是效率低，找到問(wèn)題的根源之一，小程序原生開(kāi)發(fā)，樣式使用的是wxss，不能使用嵌套語(yǔ)法，開(kāi)發(fā)效率自然而然就打了折扣，后期wxss 維護(hù)起來(lái)也比較麻煩。

前世

用wxss開(kāi)發(fā)太慢了，微信小程序原生開(kāi)發(fā)，我不想寫(xiě)wxss了。想著微信小程序都出來(lái)這么久，應(yīng)該有成熟的方案來(lái)解決這個(gè)問(wèn)題，于是我找到了以下幾種方案。

方案一：webstorm配置less自動(dòng)編譯

這種方案適合使用webstorm編輯器開(kāi)發(fā)者，無(wú)奈我現(xiàn)在鐘情于VSCode（或者微信開(kāi)發(fā)者工具，調(diào)試還是要用它） ，并不想使用webstorm，只好再尋覓其它的方案了。

使用 webstorm 編輯器開(kāi)發(fā)者可以按照以下參考文章配置。

• webstorm配置less自動(dòng)編譯

• webstorm less文件編譯成wxss文件配置

方案二：用gulp-less自動(dòng)編譯

引用 gulp 的任務(wù)流執(zhí)行任務(wù)，gulp-less 一個(gè) gulp 自動(dòng)化構(gòu)件工具的一個(gè)插件，專門(mén)用來(lái)處理 less 文件使其產(chǎn)出 css 文件提供給生產(chǎn)環(huán)境使用。這種方案，可以用，還不太符合我的要求，我懶，不想手動(dòng)編譯啊。尋尋覓覓尋找到下一個(gè)解決方案。

• gulp-less gulp打包處理less

方案三：wxss-cli：全局命令行 + 路徑

終于找到一個(gè)還不錯(cuò)的解決方案，echo008開(kāi)發(fā)的wxss-cli，這個(gè)工具全局安裝后，運(yùn)行 wxss ./path來(lái)將 less 編譯成 wxss。使用了一周發(fā)現(xiàn)，每天到公司開(kāi)發(fā)，都需要先去拷貝要編譯項(xiàng)目的目錄，我不想每次都拷貝路徑啊。并且編譯的時(shí)候會(huì)把 node_modules 里的less也給編譯。這樣編譯的速度就慢了。我只想，在我的項(xiàng)目根目錄下面pages 和 components文件下編譯，沒(méi)有辦法嗎？

這三種方案，沒(méi)有一個(gè)用著順手的......

今生

---

于是我就給wxss-cli的作者提了issues，一周過(guò)去了作者沒(méi)理我。

等不了了，不行就自己上，扒源碼，改成了符合我要求的。那個(gè)目錄需要編譯less，就在哪個(gè)文件目錄下，執(zhí)行命令 less-to-wxss watch，進(jìn)行實(shí)時(shí)監(jiān)聽(tīng)，將 less 自動(dòng)轉(zhuǎn)換成wxss文件。

用著甚是順手。我又給作者留了issus，沒(méi)理我，好像其它幾個(gè)issus也沒(méi)理，可能作者太忙了沒(méi)顧上。終于支持多個(gè)終端里面執(zhí)行 less-to-wxss watch 了。這個(gè)插件對(duì)于小程序原生開(kāi)發(fā)的猿猿們來(lái)說(shuō)，真是太好用了。一個(gè)插件就新鮮出爐了。需要的自取。less-to-wxss的npm包

less-to-wxss

---

less-to-wxss的優(yōu)點(diǎn)：

1. 不用傳路徑

2. 全局安裝，一鍵編譯less-to-wxss watch

3. 自持多終端，多目錄使用

改進(jìn)后的less-to-wxss 的實(shí)現(xiàn)原理，通過(guò)輸入命令，獲取到當(dāng)前位置路徑，對(duì)改目錄下的文件進(jìn)行文件遍歷監(jiān)聽(tīng)，通過(guò) less 工具將 less 編譯成 wxss, 重命名后保存到原目錄下。原 less 文件更新繼續(xù)上述的流程操作。

感謝各位的閱讀！關(guān)于“微信小程序?qū)崟r(shí)監(jiān)聽(tīng)less文件編譯成wxss文件的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站名稱：微信小程序?qū)崟r(shí)監(jiān)聽(tīng)less文件編譯成wxss文件的示例-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://muchs.cn/article44/hcghe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、建站公司、定制開(kāi)發(fā)、微信小程序、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)