公司原先的JS和CSS文件都是用在线压缩程序压缩的,看似方便,但很容易出错,可能是压缩程序把CSS里面的一些Hack语句给混淆了,于是我决定用大名鼎鼎的[url=http://yuilibrary.com/downloads/]YUI compressor[/url]。
但[url=http://yuilibrary.com/downloads/]YUI compressor[/url]也有一个缺点,那就是操作不人性化,要用输入命令行的方式进行操作,在实际应用中也有点不方便。今天发现了淘宝人开发的一个软件——[url=http://code.google.com/p/ourtools/downloads/list]TBCompressor[/url],这个软件是在[url=http://yuilibrary.com/downloads/]YUI compressor[/url]的基础上改进的,使用十分简单,详情请看[url=http://lifesinger.org/blog/]lifesinger[/url]的[url=http://lifesinger.org/blog/2008/10/tbcompressor-240/]《TBCompressor – JS和CSS压缩工具》[/url]一文。下面是[url=http://code.google.com/p/ourtools/downloads/list]TBCompressor[/url]的使用方法,下载请到[url=http://code.google.com/p/ourtools/downloads/list]http://code.google.com/p/ourtools/downloads/list[/url]下载,选择里面的[b]yuicompressor_2.4.2.zip[/b]文件。
[list=1]
[*]解压后点击里面的[b]install.cmd[/b]安装,如果卸载点击[b]uninstall.cmd[/b]就可以了;
[/*][*]在要压缩的JS文件或者CSS文件上点击右键,在弹出的菜单中选择[b]Process with YUICompressor[/b];
[/*][*]在原文件同一目录下会生成一个已经被压缩后的文件,文件名就是原文件名后面加个“[b]-min[/b]”。比如原文件名为“[b]test.js[/b]”,那么压缩后的文件就是“[b]test-min.js[/b]”。建议把文件名取成[b]name.source.js[/b]类型的,它会自动压缩生成[b]name.js[/b]文件。 [/*][/list]
注意:[url=http://code.google.com/p/ourtools/downloads/list]TBCompressor[/url]默认压缩文件的编码类型为[b]GB18030[/b],如果要压缩其它编码类型的文件就修改下安装目录下的[b]compressor.cmd[/b]文件,把里面的[b]GB18030[/b]替换为你要的编码类型就可以了。比如我用的是[b]UTF8[/b],就把[b]GB18030[/b]改成[b]utf-8[/b]就行了。[url=http://code.google.com/p/ourtools/downloads/list]TBCompressor[/url]的压缩率并不是太高,但是却十分安全,对于CSS文件的Hack也能很好的保留。如果你是个对代码有洁癖的人,也可以利用己压缩的文件再优化。
下面再介绍一些在线优化JS和CSS的网站,不过这些经过压缩的代码在运行时可能会出错,所以在使用时要谨慎:
[list]
[*][url=http://javascriptcompressor.com/]http://javascriptcompressor.com/[/url]
[/*][*][url=http://www.xmlforasp.net/JSCompressor.aspx]http://www.xmlforasp.net/JSCompressor.aspx[/url]
[/*][*][url=http://compressorrater.thruhere.net/]http://compressorrater.thruhere.net/[/url]
[/*][*][url=http://jsbeautifier.org/]http://jsbeautifier.org/[/url]
[/*][*][url=http://www.codebeautifier.com/]http://www.codebeautifier.com/[/url]
[/*][*][url=http://www.lonniebest.com/FormatCSS/]http://www.lonniebest.com/FormatCSS/[/url]
[/*][*][url=http://www.cssdrive.com/index.php/main/csscompressor/]http://www.cssdrive.com/index.php/main/csscompressor/[/url]
[/*][*][url=http://tools.arantius.com/css-compressor]http://tools.arantius.com/css-compressor[/url]
[/*][/list]