首页 > 代码库 > NodeJS旅程 : Less

NodeJS旅程 : Less

我一直强调我是个很懒的人,虽然我认为自己是个代码控但不代表我喜欢写大量代码。有做Web前端开发的人一定都接触CSS,由其在当下CSS3更是做出Cool站的必修课。我曾和不少的前端开发讨论过CSS3,我却发现在他们的眼中,CSS3却是一个非常难啃的骨头,平时写CSS3也只能是痛并快乐着。他们人都在说 “能少写一点吗?”  我其实并没有这种感觉,CSS代码量是大,但比起长年写服务端的代码也只不过是一个小部分而已。只是觉得写CSS3总是有一种思路不清晰的感觉,如果写CSS能像写类那样,速度就高了。直到我用了LESS!

"Less is More"! 我觉得LESS最酷的是他的能让我清晰地思考,能以面向对象的方式写CSS!让肥胖而臃肿的CSS代码变更更有骨感更为之高雅。VS.NET中有支持LESS的插件:Web Essentials . 可以支持动态将*.less文件生成*.css。不过支持上还是稍欠不足,由其在性能上有待提高。我试过同时编译10个比较大的less文件(每个代码行大约在600行左右),在i7 2.8G的机器上跑都需要1分多钟,而且很编译时内存损耗大约在2G左右(一个文件大约需要200M左右的内存),在VS.NET2012下Less有很多格式化错误。或者可以使用 Bundle Transformer 建立运行期动态编译,但性能还很是个问题,而且使用复杂。总之在ASP.NET MVC我也一没有找到其它能比这两个做法更好的方案。

 

现在情况不同了,在node架构下使用LESS是一件很幸福的事!node支持less的模块就数:less-middleware 最好用了。IDE中WebStorm也对LESS作了很好的支持。

 

Less middleware是一套基于运行期动态编译的模块,只有less的原文件被改动时或css文件不存在时才会启动编译。Less middleware的动态编译速度极快,完全没有在asp.net MVC上那种可怕的损耗问题出现。

在 epxress中配置less-middleware

var express = require(‘express‘);var app = express();...app.use(require(‘less-middleware‘)(path.join(__dirname, ‘public‘)));...

这段代码的意思是将 root/public 目录作为less-middleware的检测目录,在运行期当引用该目录下的css文件时,会触发less-middleware的动态编译。

如我的站点上有这样的目录结构

/public

  /styles

     /style.less

 

在Html中引用style.css

...<link rel="stylesheet" href="/public/styles/style.css" />...

当打开Browser访问该页面时,less-middleware会自动将style.less编译成为style.css, 而且不是每次都编译只是css文件不存在或者less文件发生了改变才会编译。

 

如果所有的less文件想保存在 /less目录下,而输出时放在/css的话,可以更改less-middleware 编译选项:

app.use(require(‘less-middleware‘)(path.join(__dirname, ‘public‘),{   preprocess: {       path: function(pathname, req) {          return pathname.replace(/^/less//, ‘/css‘);      }  }}));

 

快点动手在node.js中试试less吧,你会有完全不同的开发体验。