自动压缩合并 js,css 的中间件
发布于 9 年前 作者 cnwhy 4462 次浏览 最后一次编辑是 8 年前 来自 分享

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

现在构建工具方便又好用为什么还要弄一个中间件? 我在实际使用的时候,很多情况不适合用来构建, 可能是我的用得不够好,还是弄个中间件直观,方便。
在线压缩编译,效率怎么办? 确实,完全事实的话就没得玩了,服务端的缓存是必须的,发布的时候还是清下缓存吧。

2 回复

支持w同学的新作

@ycloud 唉新公司前端啥都没有,一个项目一套东西弄得烦了,先整一个用着.

回到顶部