构建基于 NodeJS 的 LESS.js 预编译 CSS 服务

我们在项目中使用 Less.js 的预编译 css 技术。Less 最终编译的代码是 css，也就是 *.less 输出 *.css 的工作，围绕这项过程的方式方法多种多样，有的是导入 less.js 到页面编译 less（客户端执行），有的是透过构建工具如 Grunt、Glup 生成。客户端执行比较耗时而且也有浏览器兼容的问题，故不推荐；构建工具比较流行于前端社区，如果放在 JEE 项目中似乎太重了，不便于 Javaer 学习跟使用。我们想，既然 less 是 js 编写的编译器，其官方也有提供跟 nodejs 对接 npm 包，那干脆通过 nodejs 搭建一个 web 服务器，接收到请求就返回编译好 css 便完事。

页面上通过 link 标签导入 node 运行着的服务，返回由参数所指定的 less 文件-->css 文件。如下例子如是：

其中 url 如：http://192.168.1.92/lessService/?isdebug=true&ns=C:/work/eclipse/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/yuetv_wap/asset/less&lessFile=C:/work/eclipse/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/yuetv_wap/asset/less/yuetv_wap.less&picPath=http://localhost:8080/yuetv_wap/asset/images/1/&MainDomain=http://192.168.1.92:8080/yuetv_wap

请求的参数应按如下表传参：

参数名

是否必传

含义

lessFile

y

LESS 文件位置，就是要解析的 LESS 文件名全称

ns

n

参数 ns =namespace 为命名空间之目录名，LESS 会在此目录下自动加入 LESS 而无须加上 目录前缀。通常为项目的 LESS 总目录，该目录下有多个 LESS 文件

picPath

参数 picPath 是背景图的所在目录。开发阶段和线上的部署阶段的目录会有所不同

isdebug

参数 isDebug = true 为调试阶段，不压缩 css 输出；当 isDebug = false 时候，压缩输出

通过上述介绍大家应该明白这是一种什么思路了。好接着我们需要一个 nodejs 环境，而且安装 less.js NPM 包。NPM 下载：

npm install less （https://www.npmjs.com/package/less）

OR

下载我提供的 js 包，内置了 less.js 包完整依赖。（稍后提供）

光有包不够，真正把 less 服务暴露到 web 还是下面 js 脚本。下载下面 js。

http://git.oschina.net/sp42/ajaxjs/blob/master/nodejs/less-parser.js?dir=0&filepath=nodejs%2Fless-parser.js

http://git.oschina.net/sp42/ajaxjs/blob/master/nodejs/lib/step.js?dir=0&filepath=nodejs%2Flib%2Fstep.js

http://git.oschina.net/sp42/ajaxjs/blob/master/nodejs/lib/webserver-utils.js?dir=0&filepath=nodejs%2Flib%2Fwebserver-utils.js

首先我们要让 nodejs 跑起 web 服务来，这是 nodejs 强项，仅次于 hello world 用法：

这里是 80 端口，需要的话就修改吧。还有个 base_less_folder 配置你也可以修改，是关于 less 读取的目录，也就是上述 ns 参数。当前默认有一个，然而可以通过 url 参数陆续添加。

真正处理转换的是 init 函数：

这里使用了 step.js 避免 callback hell 问题和封装了相关 web 的方法。

值得注意的是，这一系列过程都是开发环境用的。如果生成环境就是得 css 读取了。我们的后台会自动识别，如果开发的时候就走 less/node 的，生产环境就 css。

怎么让生产环境读到 css 呢？一个笨方法就是手工 copy 导出的再保存，另外一种方法就是上面脚本 倒数第三行的，自动把得到的 css 保存起来，这样就不用手工拷贝了。