我的LESS編譯方案

逆風之羽發表於2013-08-07
編譯

背景

近期專案前端決定使用less，簡單介紹一下，詳細資訊有興趣檢視官方文件（http://www.lesscss.net/article/home.html） 

LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函式等，更方便CSS的編寫和維護。 

簡單來說，它自定義了一套語法規則，在css中提供公共變數的抽取，簡單的函式運算等功能，最終通過編譯器或解析器將其編譯或解析為相對應的css程式碼。 

但是LESS檔案在何時編譯成為一個值得關注的問題，按照常規方式由幾種方案

1、前端人員手工將less檔案編譯為css，並在頁面引入css檔案

這種方案前端人員工作量會比較大，同時維護less檔案和css檔案，多人編輯同一個檔案時很容易出錯，並且多版本並行時合併程式碼不方便，一點點細微的改動都要重新編譯檔案

2、頁面引入less檔案，專案編譯時使用外掛統一進行預編譯

該方案要求所有開發人員都要安裝編譯環境（nodejs和less），並且檔案修改後都要重新編譯專案才能看到效果

3、頁面引入less檔案和js解析檔案，在頁面上將less解析為css

其實對於網際網路專案來說，這種方式基本不會考慮線上上運營，執行效率太低

LESS的兩種編譯方式

1、頁面引入js程式碼檔案解析

首先引入less程式碼

<link rel="stylesheet/less" href="example.less" />

然後引入解析程式碼

<script src="lesscss-1.4.0.min.js"></script>

解析程式碼會根據rel屬性型別通過ajax方式拉取less程式碼，然後並解析成css後追加到頁面 

好處：不必安裝less編譯環境，同樣可以使用less檔案
缺點：在頁面上解析程式碼，效率較低，受機器、網路影響較大 

2、服務端預編譯

官方提供了基於node.js的編譯工具lessc 

首先全域性安裝less

npm install -g less

然後直接使用less編譯即可

lessc example/example.less example/example.css
優點：服務端預編譯，效率高，避免客戶端解析延時。
缺點：需要安裝node以及less環境，並且每次修改less後都需要將其編譯為css檔案方可見效 

方案基本思路

鑑於上述原因，經與前端商量後決定製定一套較為平衡的方案，即：

開發環境使用方式1，不用所有開發人員安裝環境，降低開發成本，避免每次修改後都編譯

其他環境使用方式2，預編譯less檔案，提高頁面載入速度 

方案概括

1、通過配置檔案，新增一個區分開發環境和其他環境的標誌位lessOn（比如開發環境為false，其他環境為true） 
2、頁面使用自定義標籤引入less檔案，通過區分lessOn的值來判斷引入編譯前的less檔案還是編譯後的css檔案 
　　這裡自定義標籤程式碼就不貼了，舉個例子：
　　通過自定義標籤引入檔案"/less/example.less"，在輸出到頁面前判斷當前如果是伺服器環境將其轉為"/css/example.css"　　
3、頁面全域性通過判斷lessOn的取值決定是否新增對less.js的引入 
　　如果是開發環境則引入官方的js指令碼用於頁面解析，伺服器環境則不引入　　
<script src="lesscss-1.4.0.min.js"></script>
4、使用node.js編寫工具指令碼遍歷指定目錄、批量編譯less檔案
var fs = require('fs'),
    path = require('path'),
    exec = require('child_process').exec,
    sourcePath, targetPath;

//獲取命令列中的路徑
process.argv.forEach(function (val, index, array) {
    if (index == 2) {
        sourcePath = val;
    }
    if (index == 3) {
        targetPath = val;
    }
})

var lessc = function (rootPath, targetPath) {
    //取得當前絕對路徑
    rootPath = path.resolve(rootPath);
    //目標路徑絕對路徑
    targetPath = path.resolve(targetPath);
    //判斷目錄是否存在
    fs.exists(rootPath, function (exists) {
        //路徑存在
        if (exists) {
            //獲取當前路徑下的所有檔案和路徑名
            var childArray = fs.readdirSync(rootPath);
            if (childArray.length) {
                for (var i = 0; i < childArray.length; i++) {
                    var currentFilePath = path.resolve(rootPath, childArray[i]);
                    var currentTargetPath = path.resolve(targetPath, childArray[i])
                    //讀取檔案資訊
                    var stats = fs.statSync(currentFilePath);
                    //若是目錄則遞迴呼叫
                    if (stats.isDirectory()) {
                        lessc(currentFilePath, currentTargetPath);
                    } else {
                        //判斷檔案是否為less檔案
                        if (path.extname(currentFilePath) === ".less") {
                            var newFilePath = path.resolve(targetPath, path.basename(currentFilePath, '.less') + ".css");
                            if (!fs.existsSync(targetPath)) {
                                fs.mkdirSync(targetPath);
                            }
                            console.log(newFilePath);
                            exec("lessc -x " + currentFilePath + " > " + newFilePath);
                        }
                    }
                }
            }
        } else {
            console.log("directory is not exists");
        }
    });
}

lessc(sourcePath, targetPath);
View Code

5、使用maven外掛maven-antrun-plugin，在編譯打包前執行第4部的指令碼預編譯less檔案

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-antrun-plugin</artifactId>
    <version>1.7</version>
    <executions>
        <execution>
            <phase>generate-sources</phase>
            <configration>
                <tasks>
                    <echo>
                        ------------node less-compiler.js-------------
                    </echo>
                    <exec executable="node" dir="${project.basedir}/src/main/webapp/assets/less" failonerror="true">
                        <arg line="less-compiler.js  ${project.basedir}/src/main/webapp/assets/less 
　　　　　　　　　　　　　　　　　　　　${project.basedir}/src/main/webapp/assets/css"/>
                    </exec>
                    <echo>
                        ------------compiler success-----------------
                    </echo>
                </tasks>
            </configration>
            <goals>run</goals>
        </execution>
    </executions>
</plugin>

 總結

思路其實很簡單，通過區分專案執行環境，兼得兩種編譯方式的優點

任何工具都不應當直接拿來使用，通過合適的定製使其更加適合自身專案開發

相關文章