自动压缩合并 js,css 的中间件
res-minify 应该没啥好说的,貌似有几个类似功能的中间件,但用起来多少有点不对我的胃口,所以再造个轮子。
- 你可以在你的项目中做静态文件路由来使用
- 也可以放到你的前端资源服务器上,做主力模块使用, 能配合DNS就更好了
- 轻量级的配置,你值得拥有。
安装:
npm install res-minify
使用:
//express中使用不依赖其他中间件随便加到哪
var resminify = require("res-minify");
app.use(resminify(path.join(__dirname, 'public')));
默认配置及说明如下:
{
"compressCSS": true //css压缩
,"reAbsolute": false //是否转换CSS中原有的绝对路径
,"compressJS": true //js压缩
,"compileLess": true //编译Less文件
,"fileMaxAge":604800 //浏览器缓存(304)时间秒,默认1周
,"serverCache":true //服务器缓存
,"cacheFilePaths": "" //缓存目录 不设置则缓存到内存
,"directoryList":false //目录浏览
,"defaultFile":["index.html","index.htm","default.html","default.htm"] //默认文件,开启目录浏览后失效;
}
关于压缩 js 使用 uglify-js 已做好配置,支持(CMD)模块 css 使用 clean-css
关于编译 使可能用得会相对少点,目前只有LESS 如果需要可以把Sass 和 Stylus加进来,coffeescript typescript也可以,只差你的fork
关于缓存
默认缓存到内存中,如果你配置了directoryList
,则做为文件缓存到指定的目录中.
暂时没时间做第三方缓存的东西,欢迎 fork
fileMaxAge
浏览器缓存(304)时间, 设置为0则不会返回304 , 但读缓存的时候不会去判断原文件与缓存的关系,还请清理缓存.
关于reAbsolute配置项
//如果你的资文件根路径目录变化了,或者被代理到某个路径下面,最好设置reAbsolute
app.use("/webs",resminify(path.join(__dirname, 'public'),{
"reAbsolute":true
}));
//reAbsolute为true 在压缩CSS时,会将原来根路径的引用自动加上req.baseUrl;
//a{background:url(/img/a.jpg)} >> a{background:url(/webs/img/a.jpg)}
//相对路径的链接都会自动转为绝对链接. (与reAbsolute配置无关)
项目源码:github
现在构建工具方便又好用为什么还要弄一个中间件?
我在实际使用的时候,很多情况不适合用来构建, 可能是我的用得不够好,还是弄个中间件直观,方便。
在线压缩编译,效率怎么办?
确实,完全事实的话就没得玩了,服务端的缓存是必须的,发布的时候还是清下缓存吧。