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 官方文档。
本文链接:LESS-Middleware:Node.js 和 LESS 的完美搭配
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
LESS-Middleware:Node.js 和 LESS 的完美搭配的更多相关文章
- Node.js教程
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的服务器端平台.Node.js是由瑞恩·达尔在2009年开发的,它的最新版本是v0.10.36. N ...
- node.js 89行爬虫爬取智联招聘信息
写在前面的话, .......写个P,直接上效果图.附上源码地址 github/lonhon ok,正文开始,先列出用到的和require的东西: node.js,这个是必须的 request,然发 ...
- Node.js开发入门—使用AngularJS
做一个Web应用,一般都有前台和后台,Node.js能够实现后台.利用jade模板引擎也能够生成一些简单的前台页面,但要想开发出具有实际意义的现代Web应用.还得搭配一个Web前端框架. Angula ...
- Connect is a middleware layer for Node.js
Connect is a middleware layer for Node.js http://senchalabs.github.com/connect Connect Connect is ...
- Node.js安装及环境配置之Windows篇---完美,win7已测
一.安装环境 1.本机系统:Windows 10 Pro(64位) (楼主win7,完美通过)2.Node.js:v6.9.2LTS(64位) (楼主版本2018-11-01下载的最新版本) 二.安装 ...
- 用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!
昨天买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在tomcat,linux,node.js间想了好久.最终因为node搭建比较方便没那么麻烦就决定用node.js来搭建网站项目. 搭建 ...
- 拿什么守护你的Node.JS进程: Node出错崩溃了怎么办? foreverjs, 文摘随笔
守护进程 方案一 npm install forever https://github.com/foreverjs/forever 方案二 npm install -g supervisor http ...
- 拿什么守护你的Node.JS进程: Node出错崩溃了怎么办?
被吐嘈的NodeJS的异常处理 许多人都有这样一种映像,NodeJS比较快: 但是因为其是单线程,所以它不稳定,有点不安全,不适合处理复杂业务: 它比较适合对并发要求比较高,而且简单的业务场景. 在E ...
- 十个书写Node.js REST API的最佳实践(下)
收录待用,修改转载已取得腾讯云授权 5. 对你的Node.js REST API进行黑盒测试 测试你的REST API最好的方法之一就是把它们当成黑盒对待. 黑盒测试是一种测试方法,通过这种方法无需知 ...
随机推荐
- codeforces 484E
题意:给定n<=105的数组h,有m<=105的询问,每个询问为l,r,w求[l,r]区间内连续w个的最小高度最大是多少.. 思路:首先把h数组从大到小排序,然后用建立一个可持久化的下标线 ...
- 你好,欢迎来到我的博客,我是博主royalmice
你好,欢迎来到我的博客,我是博主royalmice
- iBeacon行为分析
研究iBeacon也有段时间了, 总结一下这段时间对于ibeaacon行为的分析. iOS 7.0及以后的版本开始支持iBeacon. 硬件方面, iPhone4S 及以后, ipad 3代及以后, ...
- Grpc微服务从零入门
快速入门 安装 JDK 毫无疑问,要想玩Java,就必须得先装Java JDK,目前公司主要使用的是Oracle JDK 8,安装完成后要配置环境才能正常使用,真蠢,不过也就那么一下下,认了吧.配置方 ...
- JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
开发之前需要考虑系统的差异性,比如ios手机没有回退键,所以在开发时一定要考虑二级界面需要有回退键,否则ios的手机就会陷入到这个页面出不去了.安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连 ...
- 为Angularjs ngOptions加上index解决方案
今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index. 其实对于这个问题来说Angula ...
- HBase Java简单示例
Hbase采用Java实现,原生客户端也是Java实现,其他语言需要通过thritf接口服务间接访问Hbase的数据. Hbase作为大数据存储数据库,其写能力非常强,加上Hbase本身就脱胎于Had ...
- AWS系列之二 使用EC2
在本文中我们有三个任务. 第一:使用Amazon management console创建一个EC2实例. 第二:使用本地的命令行工具远程登陆到该EC2实例. 第三:在该EC2实例上创建一个web服务 ...
- iOS给图片添加滤镜&使用openGLES动态渲染图片
给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIF ...
- 说说设计模式~门面模式(Facade)
返回目录 门面模式(Facade)属于结构型模式的一种,它符合面向对象的封装原则,但又不符合开闭原则,呵呵,今天我们主要说它的优点,不谈缺点. 定义 门面模式,是指提供一个统一的接口去访问多个子系统的 ...