less-middleware

ps：基于 express 配置

less文件目录(src)和css文件目录(dest)配置：

几点说明：

1、这个会涉及到3个目录的对应规划，即：请求路径、css文件路径、less文件路径。

2、express静态文件路径的配置 与 css文件存放路径与 对该文件的请求路径的关系。例如：

假设： "/" 为项目的根目录。

静态文件路径的配置如下：

app.use(express.static(path.join(__dirname, 'public')))

css文件路径是：

/public/css

那么页面引用 /public/css/main.css 该文件的绝对路径就是：(当然你也可以使用相对路径，具体怎么写，取决于页面的访问路径)

http://example.com/css/main.css

3、less-middleware 当有css文件请求时，才去找到对应的less文件生成相应的css文件。比如：force参数表示每次请求都重新生成对应的css文件，once表示在服务器启动后只在第一次请求时生成一次。

下面具体说明官网提供的3种配置方法：

1、默认配置：

app.use(lessMiddleware({
        src: __dirname + '/public',
        compress: true
    }));

app.use(express.static(__dirname + '/public'));

如果是默认配置，表示 less文件和生成的css文件放在同一个目录当中，例如：

/public/less/main.less //less存放路径
/public/less/main.css //css生成的路径
http://example.com/less/main.css  //页面引用的绝对路径

2、指定不同的src(less文件存放路径)和dest(存放css文件的路径)：

例如这样配置：

app.use(lessMiddleware({
        dest: __dirname + '/public/css',
        src: __dirname + '/src/less',
 }));

app.use(express.static(__dirname + '/public'));

当请求 http://example.com/css/main.css时，寻找less文件的地址就是 /src/less/css/main.less，其实你是想让它寻找 /src/less/main.less，那么要想实现该改目的就需要 prefix 参数配置。

纠正如下：

app.use(lessMiddleware({
        dest: __dirname + '/public/css',
        src: __dirname + '/src/less',
	prefix:'/css' 
 }));

app.use(express.static(__dirname + '/public'));

那么这中间暗含着什么关系呢？

一个重要因素就是：“ 配置的静态文件路径“ 到 ”css文件所在路径“之间的路径。例如：在上边的例子中 ”配置的静态文件路径“就是  __dirname + '/public' ，”css文件所在路径“就是  __dirname + '/public/css' ，那么2者之间的路径就是 "/css"， 那么这个值 也就是 prefix的值。

官方对prefix的解释是“Path which should be stripped from the public pathname” ，反正，当时我是没看明白。以上是我自己测试后对prefix作用的理解。

3、更目录（root）的配置:

pubDir = path.join(__dirname, 'public')
app.use(lessMiddleware({
        dest: '/css', // 应该是在浏览器地址栏里访问地址
        src: '/less', //或者 '../less' 如果less文件地址是在/public外头（也就是项目的根目录下）
        root: pubDir
 }));

app.use(express.static(__dirname + '/public'));

也就是说 dest 和src的配置 是相对于 root的路径来配置的。

4、使用电脑的 暂存目录（temp  directory）来配置：

temp directory 就是 用户环境变量 TEMP的值(%USERPROFILE%\AppData\Local\Temp),例如我的是：C:\Users\yangyongpeng\AppData\Local\Temp。

例如：

var os = require('os');
var tmpDir = os.tmpDir();
app.use(lessMiddleware({
        dest: tmpDir,
        src: __dirname + '/public'
});

app.use(express.static(__dirname + '/public'));
app.use(express.static(tmpDir));//注意：要将 tempDir也配置成静态文件输出目录，因为css是生成在这里的。

如果你请求 http://example.com/css/main.css。那么：

对应的less文件应该放在  /public/css/main.less
生成的css是放在：%USERPROFILE%/AppData/Local/Temp/css/main.css

其他：

如果是开发阶段建议加上 fore: true, debug: true 参数：

 app.use(lessMiddleware({
      dest: '/css',
      src : '../less',
      root: pubDir,
      force: true,
      debug: true
    }));

那么 会控制台会输出相关的处理文件的信息：

  source : f:\快盘\node-project\hei-se-hui\less\main.less
  dest : f:\快盘\node-project\hei-se-hui\public\css\main.css
  read : f:\快盘\node-project\hei-se-hui\less\main.less
  render : f:\快盘\node-project\hei-se-hui\less\main.less

如果没有输出render字段，说明所找的less文件不存在。

参考：

        less-middleware官网