首页 / NODEJS / Node.js和LESS的完美搭配

Node.js和LESS的完美搭配

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Node.js和LESS的完美搭配，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2982字，纯文字阅读大概需要5分钟。

内容图文

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

<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');
  }
}

以上就是Node.js 和 LESS 的完美搭配的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的Node.js和LESS的完美搭配全部内容，希望文章能够帮你解决Node.js和LESS的完美搭配所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/301715.html

来源：【匿名】