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吧，你会有完全不同的开发体验。