This article is based on Windows 7 system, it may be simpler on Mac. This article refers to the article without ink to highlight it, and I will explain it again.

It took some time, but finally the experiment was successful. The demo address is: http://pan.baidu.com/s/1c0dGm1i

ant can be downloaded from the official website. The address is: http:/ /ant.apache.org/, yuicompressor can also go to the official website https://github.com/yui/yuicompressor

The ant version used by the demo is apache-ant-1.8.2, and the yuicompressor version is yuicompressor-2.4.6.

In addition, since ant requires a java running environment (I didn’t read the ant instructions at the beginning, so I wasted some time), version 1.8 requires at least 1.4 java jdk, which can be found here: http:/ /ant.apache.org/faq.html

The java environment can be downloaded from the official website, address: http://www.oracle.com/technetwork/java/javase/ downloads/index.html, please install the java environment first, and then configure the java environment variables.

After configuration, you can enter java under cmd-》dos to check whether the installation is successful. Then configure the environment variables of ant. After configuring, also test whether the installation is successful. cmd->dos-> enter ant. If something similar to the following appears,

the installation is successful:

The environment was configured successfully until this point. Let’s look at the demo structure below

I built this small project in VS, just to write the build xml file. Again, just to write xml, you are completely You can do it manually in the folder.

The core is the build.xml file, with the following structure:

<?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>

The batch file of build.bat is for calling ant, and its content is:

./apache-ant-1.8.2/bin/ant -f ./build.xml

You just need to run the bat file. As for the ant and yuicompressor xml syntax parsing instructions, you can see the documentation, which is very detailed, and the demo you download has detailed instructions:

The following excerpt is the readme of yuicompressor:

==============================================================================YUI Compressor==============================================================================NAME  YUI Compressor - The Yahoo! JavaScript and CSS CompressorSYNOPSIS  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 optimizationsDESCRIPTION  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, I also found one online, the address is: http://ganquan.info/yui/?hl=zh-CN

Attached are related articles for you to learn from:

Using ANT and YUI to compress js

Ant and yuicompressor compression css, js solution