LESS-Middleware：Node.js 和 LESS 的完美搭配

　　LESS 是一个编写 CSS 的很好的方式 ，让你可以使用变量，嵌套规则，混入以及其它许多有用的功能，它可以帮助您更好地组织你的 CSS 代码。

var  lessMiddleware = require("less-middleware");app.use(lessMiddleware({src: __dirname + "/less",dest: __dirname + "/public/css",prefix: "/css",force: true}));app.use(express.static(__dirname + "/public"));

　　在这个例子中，我把源目录配置为我的应用程序的根目录下的 "/less" 目录，并让 CSS 输出到 "/public/css 目录。此外，你还需要指定 "prefix" 属性，以匹配跟在 "/public" 后面的目录，即 "/css" 目录。

　　你还可以指定其它参数，上面指定了 force 参数，让每次请求的时候重新编译 LESS 文件，再结合自动刷新功能，这样在开发的时候修改样式代码都可以有即时的效果。

　　最后在页面上引用 CSS 文件就和正常的一样了：

<link rel="stylesheet", type="text/css", href="css/styles.css">

升级和迁移　　

　　这边文章发布的时候，less-middleware 已更新到到 1.0.3 版本，上面的配置是针对0.1.x 的，下面给大家介绍如果从 0.1.x 迁移到 1.0.x。

　　首先，也是重要的变化——源目录参数的变化，之前是放在 options 参数里的，如下：

lessMiddleware({  src: path.join(__dirname, '/public')})

　　因为源目录是必备参数，所以升级之后作为中间件的第一个参数，如下：

lessMiddleware(path.join(__dirname, '/public'))

　　第二个变化是中间件参数和 LESS 参数分离，这样参数结构更清晰明了，如下：

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

　　options 参数是提供给中间件使用的，而后面两个参数对象不会影响中间件，是传递给 LESS 解析和编译器的。

　　在这个调整之后，对应参数定义方式也要相应的调整，下面是一些对应的修改：

• compress: 从options 移除，需要在compilerOptions 中定义；
• dumpLineNumbers: 从options 移除，需要再parserOptions 中定义；
• optimization: 从options 移除，需要再parserOptions 中定义；
• paths:从options 移除，需要再parserOptions 中定义；
• preprocessor: 已经被移动到preprocessor.less 中进行定义；
• relativeUrls:从options 移除，需要再parserOptions 中定义；
• sourceMap:从options 移除，需要在compilerOptions 中定义；
• yuicompress:从options 移除，需要在compilerOptions 中定义；

　　第三个变化是新增加了参数，同时移除了 prefix 和 treeFunctions 参数，让你可以更灵活的进行配置，如下：

• postprocess.css: 在被保存之前，修改 CSS 编译输出；
• preprocess.less: 在 LESS 被解析和编译前进行修改；
• preprocess.path: 在被文件系统加载前，修改 LESS 路径；

　　有了这几个参数，我们之前使用 prefix 实现的功能可以用下面的方式达到同样的效果：

preprocess: {  path: function(pathname, req) {    return pathname.replace(/^//less///, '/css');  }}

　　更详细的信息，可以参考less-middleware官方文档。

• 创意无限！一组网页边栏过渡动画【附源码下载】
• 真是好东西！13种非常动感的页面加载动画效果
• 你见过吗？9款超炫的复选框（Checkbox）效果
• 超赞！基于 Bootstrap 的响应式的后台管理模板
• 太赞了！超炫的页面切换动画效果【附源码下载】

本文链接：LESS-Middleware：Node.js 和 LESS 的完美搭配

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源