Nodejs一键压缩合并JS/CSS/Images

xglys

Nodejs一键压缩合并JS/CSS/Images
 
大家好久不见，最近比较忙，这次跟大家分享的一个功能是利用Nodejs做的一键压缩合并JS/CSS/Images。
 
前言：
 


 


 

1.测试通过环境：
 
chrome v28.0.1500.71 + nodejs v0.10.18  /  firefox v14.0.1 + nodejs v0.10.18
 
2.一键压缩文件存放位置：
 
根目录下的test文件夹（你也可以指定需要压缩的根目录，可以在前端传uglifyUrl这个值），你必须把
需要压缩的Js/Css/Images分别归类归好，如下图：
 


 
当然也可以这样，如下图：


目录层级深度可以无限长，只需注意两点：
 
1.要压缩的文件必须放在test（可在前端指定）目录下；
 
2.同一个目录下，只能放同一类型的文件，比如js文件夹里只能有js文件，css文件夹里只能有css文件，
图片文件夹里只能用图片类型文件（包括png/jpg/gif/jpeg…）
 
 
 
 
3.此功能需要安装的node模块（压缩包解压后模块已安装好）：
 
socket.io ：作用为客户端和服务器端的双向实时通信；
 
uglify-js ：作用为js文件的压缩；
 
clean-css ：作用为css文件的压缩；
 
node-smushit ：作用为图片文件的压缩；
 
walk ：作用为分析磁盘的目录结构；
 
 
4.功能介绍：
 
（1）当配置好nodejs服务器后，访问一键压缩页面http://127.0.0.1:3003，会出现如下图：


 
 
（2）当把需要压缩的文件放到test根目录下后，即可点击一键压缩按钮进行压缩，如下图：
 


 


 
（3）如果压缩图片不多的话，应该不到两分钟，即可压缩完毕，如下图：


 
 
（4）此时能达到的合并压缩效果，如下图
 
 
   1.Js文件合并压缩：
 

  2.Css文件合并压缩：
 

   3. 图文文件压缩前与压缩后的容量对比：
 
 

 


  

 


5.常见错误分析：
 

 
（1） node模块安装有误，如下图
 

 
（2）压缩指定目录有误，如下图
 

 
（3）压缩的Js文件语法错误，或者压缩的目录文件夹中，存在未知的类型文件，会导致合并压缩无法进行下去，如下图：
 

 
 
6.有关IT界的其它事儿：
 

 






 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 






 
 
7.最后