自制批处理，使用批处理和yuicompressor给js打包

自制批处理，使用批处理和yuicompressor给js打包

项目中需要对javascript进行打包和压缩，我选用了yuicompressor

yuicompressor可以压缩JS和CSS文件，去除文件中的无用空格、换行和注释。大大的减小JS和CSS文件的体积。

简单的命令如下

Java代码  

1. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js  

--type指定要打包的文件类型，可选的有 js和css
--charset 指定字符集
-o 指定输出的文件名，如果不指定这个参数将会把压缩后的内容输出到命令行上
最后的table.js是要打包的源文件

不过这样压缩有一个缺点，只能一个一个文件的进行压缩，所以使用bat进行批处理压缩

建立一个compresjs.bat文件，内容如下

Java代码  

1. (dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txt  
2. for /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"  

运行这个bat文件，会自动寻找本文件所在目录下所有子文件夹中的.js文件，进行压缩并覆盖源文件。

compresjs.bat使用的方法只是对文件进行压缩，如果有10个源文件，还会压缩成10个文件，并没有进行打包。 我们可以对他进行更进一步的处理，把这10个源文件打包压缩成1个文件，就像ext-all.js那样。

建立一个packagejs.bat文件，内容如下

Java代码  

1. for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.js  
2. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  

在packagejs.bat中，先将..\WebContent\js下的所有JS文件内容合并到uiiang-debug.js文件中，然后再使用yuicompressor对uiiang-debug.jsp压缩成uiiang.js，这样就可以得到一个经过压缩并包含全部.js文件的代码了。

packagejs.bat中使用的方法有一个缺点，那就是它在合并js文件时的顺序，是按照文件夹及子文件夹还有js文件的排列顺序进行合并的，也就是按文件名顺序排列。但是在我们实际项目中，一般情况下JS文件的引用是要指定一个特定的加载顺序，不然的话就会报错。所以还要对packagejs.bat进行再进一步的改造。

首先要建立一个列表文件dir.txt

Java代码  

1. ..\WebContent\js\widgets\WidgetInit.js  
2. ..\WebContent\js\utils\Cache.js  
3. ..\WebContent\js\common\GlobalConstant.js  
4. ..\WebContent\js\common\GlobalVariable.js  
5. ..\WebContent\js\common\GlobalFunc.js  
6. ..\WebContent\js\core\Initialize.js  

在这个文件中，按照JSP中指定的JS文件加载顺序写好文件的路径
再修改packagejs.bat

Java代码  

1. for /f %%i in (dir.txt) do type %%i >> uiiang-debug.js  
2. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  

执行这个packagejs.bat文件后，批处理命令会自动读取dir.txt并按照你指定的顺序逐行取出.js文件的路径进行，把文件内容合并到uiiang-debug.js中。

另外要注意的一点就是在dir.txt中，一定要把所需要打包压缩的的JS文件路径全部列出来，因为新的pakagejs.bat不会再自动寻找全部的JS文件了，如果有遗漏就只好报错

至此，批处理压缩打包js文件的工作就完成了，还可以将代码中的.JS换成.css对CSS文件进行打包，当然yuicompressor的--type也要改成css。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

今天下午，手头上没什么事做，于是就上网查看资料，看到很多人写的YUI Compressor的使用方法，大致写的都不详细，于是自己来做个总结。

 

（1）首先来看下，为什么要压缩js或css文件？

 

JS/CSS文件大，用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢，有的甚至由于CSS的文件而造成页面初始打开很凌乱。

 

（2）我们怎么提高用户下载JS/CSS的速度呢？

 

1、我们无法改变用户的网络状况，只有自己网站使用更快的带宽或者使用更强的服务器，使用户访问我们的时候感觉很快。

 

2、对JS/CSS文件进行压缩，由于文件较小，用户下载的时间就很短。

 

解决方案1，需要花费比较多的money,方案2实现比较简单，而且效果也明显。

 

下面我们介绍使用YUI Compressor进行JS/CSS压缩打包的方法，网上有人做了压缩大都没有讲打包（即使YUI Compressor GUI也是一样）。在这里我是用最土的办法批处理来做的。

 

1）前提是你的电脑上要有java 1.4以上的的环境

如果你没有安装JAVA环境的话，还需要安装一下JDK下载地址是：http://java.sun.com/javase/downloads/index.jsp 我们选择（Java SE Development Kit (JDK) 6 Update 14）这个下载。

 

2）到网站上下载 YUI Compressor：http://www.julienlecomte.net/yuicompressor/

 

3）解压到d盘:yuicompressor-2.4.2文件夹下

 

4）编写批处理文件compress_js.bat （这里比如compress_js.bat文件放在桌面）：(注意路径  /  )

 

1. @echo off  
2. set /p outFile=请填写输出文件名：  
3. set /p fList=请填写合并列表文件：  
4. for /f %%i in (%fList%) do type %%i >> %outFile%  
5. java -jar D:/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type js --charset utf-8  %outFile%  -o %outFile%  

 

5）编写要打包的列表文件 js.txt (如放在e:/jqTest/js.txt)：(注意路径  /  )

 

1. E:/jqTest/scripts/nav.js  
2. E:/jqTest/scripts/changeSkin.js  
3. E:/jqTest/scripts/slide.js  
4. E:/jqTest/scripts/scroll.js  
5. E:/jqTest/scripts/tooltip.js  
6. E:/jqTest/scripts/tree.js  
7. E:/jqTest/scripts/ad.js  
8. E:/jqTest/scripts/imgHover.js  
9. E:/jqTest/scripts/imgSlide.js  

 

6)双击compress_js.bat文件，根据提示输入内容，ok大功告成

 

输入和提示如下：(注意路径  /  )

 

请填写输出文件名：jq.min.js
请填写合并列表文件：e:/jqTest/js.txt

7)如果是 css文件类同，这里就不重复了(注意修改 bat中的 type 和 charset)，如有不明白的，给我留言！

 

注：以下有两个可视化版

 

1）淘宝做了一个可视化的版本，叫做TBCompressor