前端必备YUI Compressor JS/CSS压缩

很久没有写乱码了,写了很久的JS文件变得异常的大了,差不多超过50K了,无奈之下去度娘那里去找JS压缩,但是度娘几经抽风,竟然把那么好的一个应用竟然给删了,我勒个去。

但是抱着一颗永远求知的心态,我还是发现了一款java开发的(如题)js/CSS压缩工具,不过有点麻烦的就是它必须要安装在你的机器上不是web形式展现,相对来说比那个度娘app中的那么应用麻烦不少。

好吧,现在就步骤开始咯。

懂java的童鞋就十分容易啦,首先要满足你的机器能运行java那么首先可以试探性的运行cmd,抱着一种侥幸的心态去试着敲个java字样,看看有什么反应

如果你敲完java之后你看到很多英文的东东,那就证明你的机器是可以运行java程序的,如果出现“java是无效命令”那么你现在就应该要去下载java的运行环境了。

已安装java的童鞋跳过此步骤

·相关下载:

jre1.6下载地址:http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-419409.html

YUI Compressor下载地址:https://github.com/yui/yuicompressor/downloads

1、先来安装jre,如果童鞋你是下载的压缩版的(非安装)那么就是需要你要手动配置系统环境变量。

假如我的jre解压在这里“C:\Program Files\jre”

2、进入bin文件夹中,然后复制这样一串地址“C:\Program Files\jre\bin”(具体目录请自行更改)

3、点击桌面上的“我的电脑”,点击鼠标右键“属性”

4、然后点击“环境变量”

5、就是将刚刚复制的那段路径粘贴到最后面,注意在粘贴前请先输入一个”;“号,切记切记

然后就是一路确定确定,完毕。然后再把cmd窗口关闭,再打开cmd输入java看看是不是已经成功啦~

———————————————————————————————

下面可以开始演示YUI Compressor来压缩js或css的操作了

由于上面我附上了相关软件的下载地址,下载我就不赘述了,由于上文已经把java安装成功了,所以YUI Compressor现在是可以在你的机器上面运行了。首先解压(我建议是解压到某个盘符的根目录中,便于敲命令而已(但是目录名不要有中文))。

我已经将YUI Compressor解压在“D:\yui”

我们运行cmd,进入“D:\yui\build”目录,是cmd中进入

将你要压缩的js或者css复制到build目录中,为了便于测试,我就那jquery1.8.3的源文件来进行压缩测试“http://code.jquery.com/jquery-1.8.3.js

记住这条压缩命令

//压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v jquery-1.8.3.src.js > jquery-1.8.3.min.js
//压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v my.css > my.min.css

放到cmd中运行

有很多警告,我们不用管它,你现在去build文件夹下面看看这个jquery-1.8.3.min.js是否已经生成了

看到这里,压缩比50%以上,效果是令人满意的。

下面的css就是留给童鞋自己做功课了,但是我可以说一点就是css主要就是去除空格和注释全部都是整在一行。不过还需要你们的动手,实践出真理,看永远是别人的,只有自己做过才是自己的。

最后也附带一个在线YUI压缩JS的网站 http://ganquan.info/yui/?hl=zh-CN

PS:在做JS/CSS压缩时,请先备份好你的源文件代码,因为我目前也不是很清楚是否可逆,不过据很多人说用引擎压缩的都是不可逆的,所以还是要备份好源文件!!!

顺便再啰嗦一句,什么时候才用压缩,当你的项目交付给客户、运营的时候你该出手了!

作者:Yinchiang

i'm X

1条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论审核已启用。您的评论可能需要一段时间后才能被显示。