0

0

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

php中文网

php中文网

发布时间:2016-05-17 09:07:57

|

1579人浏览过

|

来源于php中文网

原创

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


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

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


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


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


  1. var  lessMiddleware = require("less-middleware");



  2. app.use(lessMiddleware({

  3.     src: __dirname + "/less",

  4.     dest: __dirname + "/public/css",

  5.     prefix: "/css",

  6.     force: true

  7. }));

  8. 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 参数里的,如下:


  1. lessMiddleware({

  2.   src: path.join(__dirname, '/public')

  3. })
复制代码


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


  1. lessMiddleware(path.join(__dirname, '/public'))
复制代码


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


  1. 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 实现的功能可以用下面的方式达到同样的效果:


  1. preprocess: {

  2.   path: function(pathname, req) {

  3.     return pathname.replace(/^\/less\//, '/css');

  4.   }

  5. }
复制代码


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


相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

42

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

46

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

202

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

341

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

16

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

100

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

75

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

67

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 20.4万人学习

Node.js 教程
Node.js 教程

共57课时 | 9.3万人学习

CSS3 教程
CSS3 教程

共18课时 | 4.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号