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. 《Linux 内核分析》第五周

    [李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...

  2. LINUX基础实验报告

    实验一:主要是介绍Linux系统概况,无运行代码. 实验二:Linux的基本操作 重要知识点 [Tab] 使用Tab键来进行命令补全,Tab键一般键盘是在字母Q旁边,这个技巧给你带来的最大的好处就是当 ...

  3. java实验报告一

    一.实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 二.实验步骤 (一)命令行下Java程序开发 1. 首先双击桌面上的Xface终 ...

  4. Android开发环境的发展演变调研

    Android开发环境的发展演变调研 前几年比较多的方法是用JDK+eclipse+ADT,该方法除了要配置JDK的路径之外, 还要在eclipse里面打开SDK Manage进行相应的操作.不过近两 ...

  5. 第二个Sprint冲刺第 八天(燃尽图)

    因为今天停电了,所以我们也休息一天!

  6. VSCode和VUE的初始安装及简单使用入门

    (版本1.0) npm run dev 运行工程 PS F:\SDN\VIMS--前端\vue> cnpm install PS F:\SDN\VIMS--前端\vue> cnpm reb ...

  7. opencv图像识别技术在自动化测试中的应用

    在自动化测试中,基于xpath.js选择器.css选择器进行元素定位及判定的技术已经比较成熟.在实际应用中,无论是web端还是移动端,仍有很多时候需要根据页面内容.页面中的图像进行定位及判定,这里介绍 ...

  8. Android 获取加速传感器的值,并去除杂音

    1.注册和注销传感器 private void registerSensor() { manager.registerListener(this, manager.getDefaultSensor(S ...

  9. poj 2406 Power Strings(kmp应用)

    题目链接:http://poj.org/problem?id=2406 题意:给出一个字符串s,求重复子串出现的最大次数. 分析:kmp的next[]数组的应用. 要求重复子串出现的最大次数,其实就是 ...

  10. asp.net使用动态模版导出word

    具体思路: 1.先制作Word模版,使用文本框+书签的方式来设计模版: 2.模版制作完之后,根据模版生成新文件,使用File.Copy方法,生成.doc格式新文件: 3.后台取得数据,参照网页渲染的方 ...