1. 程式人生 > >win7下,Ant 配合yuicompressor對js和css進行合併、壓縮、拷貝處理

win7下,Ant 配合yuicompressor對js和css進行合併、壓縮、拷貝處理

更新:2015/8/13

【NAnt】 NAnt is a .NET-based build tool. In theory it is kind of like make without make's wrinkles. In practice it's a lot like Ant.

If you are not familiar with Jakarta Ant you can get more information at the Ant project web site (http://ant.apache.org/).

demo的使用的ant版本是apache-ant-1.8.2,yuicompressor版本是yuicompressor-2.4.6。

另外由於ant是需要java執行環境的(一開始沒看ant的說明,為此浪費了些時間),1.8的版本至少需要


配置好後可在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.

另附相關文章供各位道友學習: