search instagram arrow-down
Yoyo Young

近期文章

近期迴響

彙整

分類

其它

Easy LESS – 方便不失彈性的LESS自動編譯工具

前言

近期的工作內容有可能會以前端為主。由於預期到可能會有很大的前端工作量,寫純css勢必會有許多管理上的問題,加上非常有機會與其他同事共同開發前端部分,用Webpack的話對大家來說勢必又有一段路要走,所以決定使用簡單一點的工具來做前端預處理的工作。目前團隊內主要前端開發工具都是vscode,團隊成員在預處理器上比較偏好less,經過一些測試之後決定使用Easy LESS這套工具。

安裝

首先你得要安裝vscode,這邊就先忽略了,再來是安裝Easy LESS,你可以在vscode的擴充功能(Ctrl(Command)+Shift+X)面板上輸入Easy LESS,第一個結果就是了,安裝好重啟就會有自動編譯的效果了。

2017-10-30_10h53_24.png

註:你也可以使用命令行輸入下列指令安裝
ext install easy-less

使用

剛裝好套件之後他就會開始工作了,預設的行為會偵測less檔案的存檔行為,會直接產生你剛剛存檔的less檔案的編譯結果,但這樣不是很方便,例如你有用到import或是有用到參數檔(例如bootstrap3)就不適用預設的設定,建議寫一個設定檔來管理每個workspace會比較好。

Easy LESS的設定檔是vscode標準的setting.json格式,這意味著你可以設定整台電腦的設定以及工作區域專用設定。

以我的偏好來說,我希望在我沒有設定的狀況下不要有輸出,另外產生出來的css檔案都要能夠內含sourceMap。所以你可以打開使用者設定(檔案-設定-喜好設定)來去加上相關的設定,以下是我的設定,如果你的使用情境與我相同,你可以直接把他貼在你的setting.json內(記得要放在其他設定後面,不要蓋過其他設定了)。


    "less.compile": {
        "out": false,
        "sourceMapFileInline": true,
        "sourceMap": true
    }

下面是我專案的settings.json常用的設定方式(以bootstrap為例)

main參數指的是無論如何一定要編譯到的檔案,通常都會是你包含其他less的主檔。在有main參數的狀況,就會取消每個檔案都會自動編譯的機制,以避免產生多餘的檔案。路徑部分workspaceRoot是指工作區目錄,以vscode來說就是包含.vscode資料夾的那個目錄。

這邊的路徑比較容易搞錯的是不可以設定成相對目錄,因為觸發的時候會以該less檔案為基準,如果目錄結構不同時就會寫到不同資料夾,所以必須用參數的方式給一個適當的絕對路徑。


    /*Easy Less for vscode*/
    "less.compile": {
        "main": ["${workspaceRoot}/assets/bootstrap-3.3.7/less/bootstrap.less"],
        "out": "${workspaceRoot}/assets/css/"
    }

如何應用?

設定完了之後可以做個練習,這邊用bootstrap3的less files作示範,可以去github下載原始碼,或是用npm安裝(會在node_module內),記得在branch的地方選tag並選擇v3.3.7,新版已經沒有提供less了,下載完之後放到專案內,目錄結構如下圖,放在assets的目錄內,你也可以選擇你喜歡的地方。

2017-10-30_11h42_52.png

之後新增vscode用的設定檔案,設定方式除了手動新增以外,也可以在命令列(ctrl(command)+shift+P)找到開啟工作區設定,點選之後會自動在專案內建立好這個設定檔,另外用這種方式開啟有一個好處,就是輸入時會出現提示。

2017-10-30_13h51_49.png

執行後如下圖,會在專案根目錄產生.vscode資料夾:

2017-10-30_13h53_34.png

新增完成之後就可以在這個專案內設定工作區設定,如果這個檔案有進入版控的話,那麼你的團隊成員也會共享相同的設定,但要記得他們要安裝相同的外掛。

2017-10-30_14h07_31.png

設定內容跟前面提供的一樣,直接填入之後存檔就完成設定了,我的習慣會另外加上註解以告知剛接手的人員這段設定與什麼套件有關係,之後就可以開始進行測試了,你可以打開bootstrap.less或是任何一個less檔案之後馬上存檔看看,會在右下角出現編譯中狀況的提示,之後就可以在對應的目錄找到css檔案了。

2017-10-30_14h11_38.png

可選的選項

如果我的情境和你的使用情境不同,這邊是從官方文件節錄過來的可用選項清單,說明是我寫的並非完全翻譯官方,僅供參考,你也可以直接在設定檔上找到清單(會有intellisense)。

main: { filepath: string | string[] }

  • 輸入你需要編譯的檔名,可以是陣列,意味著可以傳入

out: { boolean | filepath: string | folderpath: string }

  • 設定為false的時候為不輸出,可以用workspace或是檔案內註解來覆蓋。
  • 設定為檔名的時候會輸出一個單一檔案,設定為路徑的時候輸出檔明會參考輸入的檔案
  • 檔名是相對路徑(相對於存檔瞬間的檔案)

outExt: { string }

  • 可以改變輸出副檔名,例如.wxss,很少用。

sourceMap: { boolean }

  • 產生map檔案,可以在瀏覽器上幫助你找原始的less檔案,建議搭配後者使用,我基本上都開著。

sourceMapFileInline: { boolean }

  • 將map檔案嵌入在css檔案最後面,這樣你就不需要多一個.css.map檔案了,預設不會開。

compress: { boolean }

  • 就是minify,不過,目前版本不會提供.min的字尾,也沒有提供輸出兩個檔案用的模式。

relativeUrls: { boolean }

  • 如果檔案被import,會在內容的網址上自動修改路徑為載入的路經,這點請直接看官方文件解比較清楚。

autoprefixer: { string | string[] }

  • 使用autoprefixer外掛,有內含在內。

ieCompat: { boolean }

  • IE8相容模式,主要在於data-url的長度會限制在32KB以內。

 相關連結

vscode-easy-less github

 

發表迴響
繼續閱讀進入