我的LESS编译方案

cnq

背景
　　近期项目前端决定使用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);
var currentTargetPath = path.resolve(targetPath, childArray)
//读取文件信息
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>
总结
　　思路其实很简单，通过区分项目运行环境，兼得两种编译方式的优点
　　任何工具都不应当直接拿来使用，通过合适的定制使其更加适合自身项目开发