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文件不存在。
参考: