个人LESS编译方案

背景

近期项目前端决定使用less，简单介绍一下，详细信息有兴趣查看官方文档（http://www.lesscss.net/article/home.html） 

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用相似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 

简单来讲，它自定义了一套语法规则，在css中提供公共变量的抽取，简单的函数运算等功能，最终经过编译器或解析器将其编译或解析为相对应的css代码。 

可是LESS文件在什么时候编译成为一个值得关注的问题，按照常规方式由几种方案

一、前端人员手工将less文件编译为css，并在页面引入css文件

这种方案前端人员工做量会比较大，同时维护less文件和css文件，多人编辑同一个文件时很容易出错，而且多版本并行时合并代码不方便，一点点细微的改动都要从新编译文件

二、页面引入less文件，项目编译时使用插件统一进行预编译

该方案要求全部开发人员都要安装编译环境（nodejs和less），而且文件修改后都要从新编译项目才能看到效果

三、页面引入less文件和js解析文件，在页面上将less解析为css

其实对于互联网项目来讲，这种方式基本不会考虑在线上运营，执行效率过低

LESS的两种编译方式

一、页面引入js代码文件解析

首先引入less代码

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

而后引入解析代码

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

解析代码会根据rel属性类型经过ajax方式拉取less代码，而后并解析成css后追加到页面 

好处：没必要安装less编译环境，一样可使用less文件

缺点：在页面上解析代码，效率较低，受机器、网络影响较大 

二、服务端预编译

官方提供了基于node.js的编译工具lessc 

首先全局安装less

npm install -g less

而后直接使用less编译便可

lessc example/example.less example/example.css

优势：服务端预编译，效率高，避免客户端解析延时。

缺点：须要安装node以及less环境，而且每次修改less后都须要将其编译为css文件方可见效 

方案基本思路

鉴于上述缘由，经与前端商量后决定制定一套较为平衡的方案，即：

开发环境使用方式1，不用全部开发人员安装环境，下降开发成本，避免每次修改后都编译

其余环境使用方式2，预编译less文件，提升页面加载速度 

方案归纳

一、经过配置文件，添加一个区分开发环境和其余环境的标志位lessOn（好比开发环境为false，其余环境为true） 

二、页面使用自定义标签引入less文件，经过区分lessOn的值来判断引入编译前的less文件仍是编译后的css文件 

　　这里自定义标签代码就不贴了，举个例子：

　　经过自定义标签引入文件"/less/example.less"，在输出到页面前判断当前若是是服务器环境将其转为"/css/example.css"　　

三、页面全局经过判断lessOn的取值决定是否添加对less.js的引入 

　　若是是开发环境则引入官方的js脚本用于页面解析，服务器环境则不引入　　

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

四、使用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

五、使用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>

 总结

思路其实很简单，经过区分项目运行环境，兼得两种编译方式的优势

任何工具都不该当直接拿来使用，经过合适的定制使其更加适合自身项目开发