CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS。

  压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参数替换为一些简单的a,b之类的变量,从界面看起来非常难阅读,起到加密作用。

  常见的有好多压缩工具,这里使用yui进行压缩,首先需要下载yui的包:  yuicompressor-2.4.7.jar  ,可以到我的服务器下载:http://qiaoliqiang.cn/fileDown/yuicompressor-2.4.7.zip

1.查看yui使用帮助:

G:\>java -jar yuicompressor-2.4.7.jar

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset <charset> Read the input file using <charset>
--line-break <column> Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o <file> Place the output into <file>. Defaults to stdout.
Multiple files can be processed using the following syntax:
java -jar yuicompressor.jar -o '.css$:-min.css' *.css
java -jar yuicompressor.jar -o '.js$:-min.js' *.js JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.

2.压缩JS:

  默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参数替换为一些简单的a,b之类的变量,起到加密作用。

JS内容:

/**
* 验证密码和账户
*/
function validate2(username, password) {
if (username != "zhangsan") {
alert("userName is error:" + c)
}
if (password != "123456") {
alert("password is error:" + d)
}
};

源文件大小:220字节

 进行压缩:

G:\>java -jar yuicompressor-2.4.7.jar index.js -v -o index-min.js --charset UTF-8

参数解释:

index.js  需要压缩的源文件
-v -o 显示信息与指定输出文件名字
index-min.js 压缩后的文件
--charset 指定编码格式

压缩后文件内容和大小:(被压缩成一行,注释被去掉,分号也被去掉)

function validate2(b,a){if(b!="zhangsan"){alert("userName is error:"+c)}if(a!="123456"){alert("password is error:"+d)}};

大小为:120字节

我们也可以保留分号:    --preserve-semi 参数

G:\>java -jar yuicompressor-2.4.7.jar index.js -v --preserve-semi -o index-min.js --charset UTF-8

[WARNING] The symbol c is declared but is apparently never used.
This code can probably be written in a more compact way.
username!="zhangsan"){alert("userName is error:"+ ---> c <--- );}if(password!="123456"){ [WARNING] The symbol d is declared but is apparently never used.
This code can probably be written in a more compact way.
password!="123456"){alert("password is error:"+ ---> d <--- );}}

压缩后内容:

function validate2(b,a){if(b!="zhangsan"){alert("userName is error:"+c);}if(a!="123456"){alert("password is error:"+d);}}

3.压缩CSS

G:\>java -jar yuicompressor-2.4.7.jar index.css -v -o index1-min.css --charset UTF-8

也可以写成bat脚本进行压缩JS和css,此处就不写了。

接下来研究Java中调用yui压缩JS和css。原理是Java调用RuntTime执行cmd中的一些命令,只是写了个for循环遍历文件夹下main的css和js文件进行遍历。同样依赖上面的jar包:

工具类如下:

package zdComputerTest;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List; /**
* 通过yuicompressor压缩JS|CSS文件工具类
* @author Administrator
*
*/
public class CompressUtils {
private static final String encoding = "utf-8";
private static final String[] suffixArray = { ".js", ".css" }; public static void main(String[] args) {
String yuiPath = "G:/yuicompressor-2.4.7.jar";
String filePath = "G:/js"; compressFile(yuiPath, filePath);
} /**
* 压缩指定文件夹下所有的js/css
*
* @param yuiPath
* yuicompressor-2.4.7.jar文件路径
* @param filePath
* 要压缩的文件夹路径
*/
public static void compressFile(String yuiPath, String filePath) {
File file = new File(filePath);
List<String> commondList = new ArrayList<String>();
initCommondList(yuiPath, commondList, file);
excuteCompress(commondList);
} /**
* 执行压缩命令
* @param commondList
*/
private static void excuteCompress(List<String> commondList) {
Runtime runTime = Runtime.getRuntime();
Date startTime = new Date();
Long count = 0L;
for (String cmd : commondList) {
try {
System.out.println(cmd);
runTime.exec(cmd);
count++;
} catch (IOException e) {
e.printStackTrace();
}
}
Date endTime = new Date();
Long cost = endTime.getTime() - startTime.getTime();
System.out.println("压缩完成,耗时:" + cost + "ms,共压缩文件个数:" + count);
} /**
* 初始化压缩命令
* @param yuiPath
* @param commondList
* @param file
*/
private static void initCommondList(String yuiPath,
List<String> commondList, File file) {
if (file.isDirectory()) {
File[] files = file.listFiles();
// 如果某个文件夹是空文件夹,则跳过
if (files == null) {
return;
}
for (File f : files) {
initCommondList(yuiPath, commondList, f);
}
} else {
String fileName = file.getName();
String suffix = fileName.substring(fileName.lastIndexOf("."),
fileName.length()); List<String> suffixList = Arrays.asList(suffixArray);
if (suffixList.contains(suffix)
&& !fileName.endsWith("-min" + suffix)) {
StringBuffer sb = new StringBuffer();
sb.append("java -jar ");
sb.append(yuiPath);
sb.append(" --type ");
sb.append(suffix.substring(suffix.indexOf(".") + 1));
sb.append(" --charset ");
sb.append(encoding).append(" ");
sb.append(file.getPath()).append(" ");
sb.append("-o").append(" ");
sb.append(file.getPath().replace(suffix, "-min" + suffix)); commondList.add(sb.toString());
} }
}
}

4.Ant整合yui压缩JS的脚本

项目结构:

 build.xml脚本:(此脚本可以编译项目中的src下的文件和压缩JS和CSS)

<project name="exam" default="js-css-compress" basedir=".">
<!--import properties -->
<property file="build.properties">
</property> <path id="exam.lib">
<fileset dir="${tomcatPath}/lib">
<include name="*.jar" />
</fileset>
<fileset dir="${basedir}/WebContent/WEB-INF/lib">
<include name="*.jar" />
</fileset>
</path> <target name="testTarget">
<echo message="${examJsRootPath}" />
</target> <target name="cleanExamBuildFolder">
<delete dir="${basedir}/dist/examBuildClass" />
<delete dir="${basedir}/dist/examJavaCodeJar" />
<echo message="delete ${basedir}/dist/examBuildClass and ${basedir}/dist/examJavaCodeJar "/> <mkdir dir="${basedir}/dist/examBuildClass" />
<mkdir dir="${basedir}/dist/examJavaCodeJar" />
<echo message="mkdir ${basedir}/dist/examBuildClass and ${basedir}/dist/examJavaCodeJar "/>
</target> <!--编译项目中的源代码-->
<target name="buildSrcCode" depends="cleanExamBuildFolder">
<javac encoding="utf-8" srcdir="${basedir}/src" excludes="cn/xm/exam/test/**" destdir="${basedir}/dist/examBuildClass" classpathref="exam.lib" includeAntRuntime="false" fork="true">
<compilerarg line="-encoding UTF-8 " />
</javac>
<echo message="编译成功" level="info"/>
</target> <!--打包编译后的classes文件-->
<target name="jarSrcCode" depends="buildSrcCode">
<jar destfile="${basedir}/dist/examJavaCodeJar/${jarName}-${jarNumber}.jar" basedir="${basedir}/dist/examBuildClass" includes="**/*.class" excludes="**/Test.class">
</jar>
<echo message="jar success!"/> <delete dir="${basedir}/dist/examBuildClass" />
<echo message="delete ${basedir}/dist/examBuildClass"/>
</target> <target name="js-css-compress">
<java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
<arg value="--charset" />
<arg value="UTF-8" />
<arg value="${examJsRootPath}/examParper/examPaper/examparperManage.js" />
<arg value="-o" />
<arg value="${examJsRootPath}/examParper/examPaper/examparperManage.min.js" />
</java>
<echo message="${examJsRootPath}/examParper/examPaper/examparperManage.js compressed succes"/> <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
<arg value="--charset" />
<arg value="UTF-8" />
<arg value="${examJsRootPath}/examParper/addExamparper/index3question.js" />
<arg value="-o" />
<arg value="${examJsRootPath}/examParper/addExamparper/index3question.min.js" />
</java>
<echo message="${examJsRootPath}/examParper/addExamparper/index3question.js compressed succes"/> <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
<arg value="--charset" />
<arg value="UTF-8" />
<arg value="${examJsRootPath}/examParper/exam/addExam.js" />
<arg value="-o" />
<arg value="${examJsRootPath}/examParper/exam/addExam.min.js" />
</java>
<echo message="${examJsRootPath}/examParper/exam/addExam.js compressed succes"/> <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
<arg value="--charset" />
<arg value="UTF-8" />
<arg value="${examJsRootPath}/examParper/exam/updateExam.js" />
<arg value="-o" />
<arg value="${examJsRootPath}/examParper/exam/updateExam.min.js" />
</java>
<echo message="${examJsRootPath}/examParper/exam/updateExam.js compressed succes"/> <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
<arg value="--charset" />
<arg value="UTF-8" />
<arg value="${examJsRootPath}/outDepart/outdepartEmpAndBreakRulesInfoManager.js" />
<arg value="-o" />
<arg value="${examJsRootPath}/outDepart/outdepartEmpAndBreakRulesInfoManager.min.js" />
</java>
<echo message="${examJsRootPath}/outDepart/outdepartEmpAndBreakRulesInfoManager.js compressed succes"/> </target>
</project>

 build.properties

tomcatPath=E:/tomcat/apache-tomcat-7.0.72
jarName=commons-exam-code
jarNumber=1.0.1
examJsRootPath=${basedir}/WebContent/js

yui压缩JS和CSS文件的更多相关文章

  1. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

  2. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  3. 使用yuicompressor-maven-plugin压缩js及css文件

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  4. (转)使用yuicompressor-maven-plugin压缩js及css文件(二)

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  5. grunt 合并压缩js和css文件(二)

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...

  6. IIS 7 启用 gzip 静态压缩 压缩js和css文件

    搞了很久,不如nginx好弄,不知道怎么修改压缩比,也不知道怎么压缩的规则是啥(管理器上没有写),不过反正出来了,一个js文件900多K变成了100多K 1.在web.config文件里面加上: &l ...

  7. 项目中对模板和js,css文件进行压缩的处理类

    我们知道,在html的页面中,所有空格和换行符其实都会占据一定的空间,即使使用了gzip压缩,在传输过程中依然会浪费用户的流量和我们自己服务器的带宽,此脚本就是为了解决这个问题而诞生的. 请自行下载G ...

  8. maven中用yuicompressor和closure-compiler对js、css文件进行压缩

    转载自:http://matychen.iteye.com/blog/1477350 项目采用maven构建的时候,需要压缩js,css等,网上找了相关资料,自己综合了下-  直接放代码: <! ...

  9. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

随机推荐

  1. Final发布——视频博客

    1.视频链接 视频上传至优酷自频道,地址链接:http://v.youku.com/v_show/id_XMzk1OTIwNTUwMA==.html?spm=a2h0j.11185381.listit ...

  2. 对软件工程Alpha迭代的反思与总结

    对软件工程Alpha迭代的反思与总结 本次软件工程的A轮迭代,我们组出了不小的问题.作为一个团队来说,我们的队伍出现了很严重的状况,严重到让老师觉得我们一度失控.于是我撰写此文,借以反思.总结和提高. ...

  3. 《Linux内核分析》第二周笔记 操作系统是如何工作的

    操作系统是如何工作的 一.函数调用堆栈 1.三个法宝 计算机是如何工作的?(总结)——三个法宝(存储程序计算机.函数调用堆栈.中断机制) 1)存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: ...

  4. 第四次WBS

    分解原则 1.将主体目标逐步细化分解,最底层的日常活动可直接分派到个人去完成: 2.每个任务原则上要求分解到不能再细分为止: 3.日常活动要对应到人.时间和资金投入. 二.任务分解的方法 1.采用树状 ...

  5. 『编程题全队』Alpha 阶段冲刺博客Day5

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.完成SlotWidget的设计和功能 2.修改了TitleBar上的功能按钮的CSS样式表 孙慧君: 1.登录框的UI设计 2 ...

  6. 5G的作业- 云计算

    作业命题:5G对于保险行业的影响,技术层面和业务模式层面 一.5G网络的特点: 5G网络主要有三大特点,极高的速率 enhanced mobile broadband (eMBB),极大的容量 Mas ...

  7. 编译nginx平滑添加stream模块

    1.操作背景 操作系统版本:CentOS Linux release (Core) nginx版本:1.13.4 nginx从1.9.0版本开始,新增了ngx_stream_core_module模块 ...

  8. pgm7

    和 Koller 的 video 最大的不同莫过于书上讲 LBP 的角度不是 procedural 的,而是原理性的.我们先看个 procedural 的,在一般的 cluster graph 上的 ...

  9. group replication && Galera replication

    不愧是 Oracle 的 MySQL Community Manager,把对手的 Galera Cluster 讲得一无是处. http://lefred.be/content/group-repl ...

  10. 【题解】 bzoj1191: [HNOI2006]超级英雄Hero (二分图)

    bzoj1191,懒得复制,戳我戳我 Solution: 二分图最大匹配板子题 Attention: 注意题干中的一句话 只有当选手正确回答一道题后,才能进入下一题,否则就被淘汰. Code: //I ...