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

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.最后