本文基于windows7系统，mac上或许更简单些。本文参阅了无墨来点睛的文章http://www.cnblogs.com/catprayer/archive/2011/08/03/2126719.html，再此说明。
花了点时间，总算是试验成功，demo地址：http://pan.baidu.com/s/1c0dGm1i
ant可以去官网下载，地址是：http://ant.apache.org/ ，yuicompressor也可以去官网下一个https://github.com/yui/yuicompressor
demo的使用的ant版本是apache-ant-1.8.2，yuicompressor版本是yuicompressor-2.4.6。
另外由于ant是需要java运行环境的（一开始没看ant的说明，为此浪费了些时间），1.8的版本至少需要1.4的java jdk，可以从这里查阅：http://ant.apache.org/faq.html
java环境可以到官网下载，地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html,请先安装java环境，然后配置java的环境变量，
配置好后可在cmd-》dos下输入java，查阅是否安装成功。然后配置ant的环境变量，配置好后，同样测试是否安装成功，cmd->dos->输入ant，出现类似下面的内容表示
安装成功：
到此环境才配置成功。下面看demo结构
我这是在vs里面建的小工程，仅仅是为了编写build的xml文件而已，再次说明，仅仅为编写xml，你完全可以自己手动在文件夹中做的。
其中核心的是build.xml文件，结构如下：
<?xml version="1.0" encoding="utf-8"?>
<project default="compress" basedir="F:\js\cc\deploymentTes\web" name="core">
<!-- 项目的 web 路径 -->
<property name="path" value="F:\js\cc\deploymentTes\web" />
<!-- 部署的输出路径 -->
<property name="targetDir" value="F:\js\cc\deploymentTes\build_output\asset" />
<!-- 源文件路径(src) -->
<property name="code.src" value="src" />
<!-- !!! YUI Compressor 路径 !!! -->
<property name="yuicompressor" value="F:\js\cc\deploymentTes\build\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar" />
<!-- =================================
target: concat 拼接（合并）文件
================================= -->
<target name="concat" depends="" description="concat code">
<echo message="Concat Code Files Begin!!!" />
<!-- JS -->
<concat destfile="${targetDir}/js/all.js" encoding="utf-8" fixlastline="on">
<fileset dir="${code.src}/js" includes="jquery-1.10.2.js" />
<fileset dir="${code.src}/js" includes="jquery-ui.js" />
</concat>
<!-- CSS -->
<concat destfile="${targetDir}/css/all.css" encoding="utf-8">
<fileset dir="${code.src}/css" includes="jquery-ui.css" />
<fileset dir="${code.src}/css" includes="jquery-ui.theme.css" />
</concat>
<echo message="Concat Code Files Finished!!!" />
</target>
<!-- =================================
target: copy 拷贝文件
================================= -->
<target name="copy_asset" depends="concat" description="copy the asset file">
<echo message="Copy Asset Begin" />
<!-- main.html -->
<copy todir="${targetDir}/" overwrite="true">
<fileset dir="${path}/" includes="*.html"/>
</copy>
<!-- img *.png -->
<copy todir="${targetDir}/img" overwrite="true">
<fileset dir="${path}/asset/img" includes="*.png" />
</copy>
<echo message="Copy Asset Finished" />
</target>
<!-- =================================
target: compress 压缩 js && css
================================= -->
<target name="compress" depends="copy_asset" description="compress code">
<echo message="Compress Code Begin" />
<apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/js">
<fileset dir="${targetDir}/js" includes="*.js"/>
<arg line="-jar"/>
<arg path="${yuicompressor}" />
<arg line="--charset utf-8" />
<arg line="-o" />
<targetfile/>
<mapper type="glob" from="*.js" to="*.min.js" />
</apply>
<apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/css">
<fileset dir="${targetDir}/css" includes="*.css"/>
<arg line="-jar"/>
<arg path="${yuicompressor}" />
<arg line="--charset utf-8" />
<arg line="-o" />
<targetfile/>
<mapper type="glob" from="*.css" to="*.min.css" />
</apply>
<echo message="Compress Code Finished" />
<echo message="Clean Begin" />
<!--<delete verbose="false" failonerror="true">
<fileset dir="${path}" includes="${targetDir}/*-o.js" />
</delete>-->
<echo message="Clean Finished" />
</target>
</project>
build.bat的批处理文件是为了调用ant的，它的内容是：
./apache-ant-1.8.2/bin/ant -f ./build.xml
是要运行bat文件即可，至于ant和yuicompressor xml语法解析说明，可以看文档，非常详细，而且你下载的demo里面有详细使用说明：
下面摘录的是yuicompressor的readme：
==============================================================================
YUI Compressor
==============================================================================
NAME
YUI Compressor - The Yahoo! JavaScript and CSS Compressor
SYNOPSIS
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> or a file pattern.
Defaults to stdout.
JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations
DESCRIPTION
The YUI Compressor is a JavaScript compressor which, in addition to removing
comments and white-spaces, obfuscates local variables using the smallest
possible variable name. This obfuscation is safe, even when using constructs
such as 'eval' or 'with' (although the compression is not optimal is those
cases) Compared to jsmin, the average savings is around 20%.
The YUI Compressor is also able to safely compress CSS files. The decision
on which compressor is being used is made on the file extension (js or css)
GLOBAL OPTIONS
-h, --help
Prints help on how to use the YUI Compressor
--line-break
Some source control tools don't like files containing lines longer than,
say 8000 characters. The linebreak option is used in that case to split
long lines after a specific column. It can also be used to make the code
more readable, easier to debug (especially with the MS Script Debugger)
Specify 0 to get a line break after each semi-colon in JavaScript, and
after each rule in CSS.
--type js|css
The type of compressor (JavaScript or CSS) is chosen based on the
extension of the input file name (.js or .css) This option is required
if no input file has been specified. Otherwise, this option is only
required if the input file extension is neither 'js' nor 'css'.
--charset character-set
If a supported character set is specified, the YUI Compressor will use it
to read the input file. Otherwise, it will assume that the platform's
default character set is being used. The output file is encoded using
the same character set.
-o outfile
Place output in file outfile. If not specified, the YUI Compressor will
default to the standard output, which you can redirect to a file.
Supports a filter syntax for expressing the output pattern when there are
multiple input files. ex:
java -jar yuicompressor.jar -o '.css$:-min.css' *.css
... will minify all .css files and save them as -min.css
-v, --verbose
Display informational messages and warnings.
JAVASCRIPT ONLY OPTIONS
--nomunge
Minify only. Do not obfuscate local symbols.
--preserve-semi
Preserve unnecessary semicolons (such as right before a '}') This option
is useful when compressed code has to be run through JSLint (which is the
case of YUI for example)
--disable-optimizations
Disable all the built-in micro optimizations.
NOTES
+ If no input file is specified, it defaults to stdin.
+ Supports wildcards for specifying multiple input files.
+ The YUI Compressor requires Java version >= 1.4.
+ It is possible to prevent a local variable, nested function or function
argument from being obfuscated by using "hints". A hint is a string that
is located at the very beginning of a function body like so:
function fn (arg1, arg2, arg3) {
"arg2:nomunge, localVar:nomunge, nestedFn:nomunge";
...
var localVar;
...
function nestedFn () {
....
}
...
}
The hint itself disappears from the compressed file.
+ C-style comments starting with /*! are preserved. This is useful with
comments containing copyright/license information. For example:
/*!
* TERMS OF USE - EASING EQUATIONS
* Open source under the BSD License.
* Copyright 2001 Robert Penner All rights reserved.
*/
becomes:
/*
* TERMS OF USE - EASING EQUATIONS
* Open source under the BSD License.
* Copyright 2001 Robert Penner All rights reserved.
*/
MODIFIED RHINO FILES
YUI Compressor uses a modified version of the Rhino library
(http://www.mozilla.org/rhino/) The changes were made to support
JScript conditional comments, preserved comments, unescaped slash
characters in regular expressions, and to allow for the optimization
of escaped quotes in string literals.
COPYRIGHT AND LICENSE
Copyright (c) 2011 Yahoo! Inc. All rights reserved.
The copyrights embodied in the content of this file are licensed
by Yahoo! Inc. under the BSD (revised) open source license.
ps，在网上也找了个在线的，地址是：http://ganquan.info/yui/?hl=zh-CN
另附相关文章供各位道友学习：
http://www.cnblogs.com/likehua/archive/2011/08/16/2141332.html 使用ANT和YUI压缩js
http://blog.csdn.net/kunlong0909/article/details/7584802 ant和yuicompressor 压缩css、js方案
时间： 2024-08-10 12:59:02