我的LESS編譯方案

背景

近期項目前端決定使用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);

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>

 總結

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

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