Home > Article > Web Front-end > LESS-Middleware：Node.js 和 LESS 的完美搭配

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

WBOYOriginal: 2016-05-17 09:07:571290browse

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

　　最近我一直在研究 Node.js ，并想用 less-middleware 中间件，这样我可以很容易的在我的应用程序中使用 LESS 了。配置好以后，LESS-Middleware 能够自动处理编译你的 LESS 代码为 CSS 代码。

如果你把 LESS 和 CSS 文件存储在同一个目录，配置很简单，但我想用不同的路径为我的源目录和目标目录，这个地方就有点问题了，所以在这里，我想我把发现的问题记录下来。

　　如果您指定一个不同的 "src" 和 "dest" 的目录，您还必须提供 "prefix" 选项，它必须匹配跟在您的目标目录中后面的目录。下面是这个例子可以更好的让你理解：

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 文件就和正常的一样了：

复制代码

这边文章发布的时候，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 官方文档。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5仿苹果手机的面板合拢折叠效果Next article：HTML教程：如何设置Iframe自适应高度

See more

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

Related articles