yui压缩JS和CSS文件

时间:2022-05-19 15:42:45

  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的脚本

项目结构:

yui压缩JS和CSS文件

 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