首頁 > 微信小程式 > 小程式開發 > 微信小程式即時監聽less文件編譯成wxss文件,全域指令工具與less-to-wxss

微信小程式即時監聽less文件編譯成wxss文件,全域指令工具與less-to-wxss

hzc
發布: 2020-06-15 11:13:58
轉載
3287 人瀏覽過

我們的微信小程式專案選擇的技術堆疊是:原生 內嵌h5,技術選型沒毛病,就是覺得哪裡怪怪的。同樣的設計稿,通常h5開發比小程式開發快,鬱悶,為啥呀?小程式提供了許多封裝好的元件,為什麼開發起來還是效率低,找到問題的根源之一,小程式原生開發,樣式使用的是wxss,不能使用巢狀語法,開發效率自然而然就打了折扣,後期wxss 維護起來也比較麻煩。

前世

wxss 開發太慢了,微信小程式原生開發,我不想寫wxss了。想著微信小程式都出來這麼久,應該有成熟的方案來解決這個問題,於是我找到了以下幾種方案。

方案一:webstorm設定less自動編譯

這個方案適合使用webstorm 編輯器開發者,無奈我現在鍾情於VSCode(或微信開發者工具,調試還是要用它) ,並不想使用webstorm ,只好再尋覓其它的方案了。

使用 webstorm 編輯器開發者可以依照下列參考文章設定。

  • webstorm設定less自動編譯

  • #webstorm less檔編譯成wxss檔組態

#方案二:用gulp-less自動編譯

引用gulp 的任務流程執行任務,gulp-less 一個gulp 自動化構件工具的一個插件,專門用來處理less 檔案使其產出css 文件提供給生產環境使用。這種方案,可以用,還不太符合我的要求,我懶,不想手動編譯啊。尋找覓食覓食尋找到下一個解決方案。

  • gulp-less gulp打包處理less

#方案三:wxss-cli:全域命令列路徑

終於找到一個還不錯的解決方案,echo008開發的wxss-cli,這個工俱全域安裝後,執行wxss ./path來將less 編譯成wxss。使用了一週發現,每天到公司開發,都需要先去拷貝要編譯專案的目錄,我不想每次都拷貝路徑啊。並且編譯的時候會把 node_modules 裡的less也給編譯。這樣編譯的速度就慢了。我只想,在我的專案根目錄下面pages 和 components檔案下編譯,沒有辦法嗎?

這三種方案,沒有一個用著順手的......

微信小程式即時監聽less文件編譯成wxss文件,全域指令工具與less-to-wxss

#今生


於是我就給wxss-cli的作者提了issues,一週過去了作者沒理我。

微信小程式即時監聽less文件編譯成wxss文件,全域指令工具與less-to-wxss

等不了了,不行就自己上,扒源碼,改成了符合我要求的。那份目錄要編譯 less,就在哪個檔案目錄下,執行指令 less-to-wxss watch,進行即時監聽,將 less 自動轉換成 wxss 文件。

微信小程式即時監聽less文件編譯成wxss文件,全域指令工具與less-to-wxss

用著甚是順手。我又留了給作者issus,沒理我,好像其它幾個issus也沒理,可能作者太忙了沒顧上。終於支援多個終端機裡面執行 less-to-wxss watch 了。這個外掛對於小程式原生開發的猿猿們來說,真是太好用了。一個插件就新鮮出爐了。需要的自取。 less-to-wxss的npm套件

less-to-wxss


less-to-wxss的優點:

  1. 不用傳路徑

  2. #全域安裝,一鍵編譯less-to-wxss watch

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

改進後的less-to-wxss 的實作原理,透過輸入指令,取得到目前位置路徑,對改目錄下的檔案進行檔案遍歷監聽,透過less 工具將less 編譯成wxss, 重新命名後儲存到原目錄下。原 less 檔案更新繼續上述的流程操作。

推薦教學:《微信小程式

以上是微信小程式即時監聽less文件編譯成wxss文件,全域指令工具與less-to-wxss的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板