win7下,Ant 配合yuicompressor对js和css进行合并、压缩、拷贝处理

本文基于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-10-12 15:22:21

win7下,Ant 配合yuicompressor对js和css进行合并、压缩、拷贝处理的相关文章

关于WEB-INF目录下的静态资源(js、css、img)的访问

首先,需要明确的是WEB-INF目录是被保护起来的,其下的jsp页面不能直接运行,只能通过控制器跳转来访问:而同样在此目录下的静态资源(js.css.img)也不能被WEB-INF目录外的其他文件直接引用. WEB-INF下的目录结构如图: jsp文件夹下放的是jsp文件,static文件夹下放的是css,js,img等静态资源: 由于jsp文件夹与static文件夹都在WEB-INF目录下,故jsp文件夹下的jsp引入某js可通过相对路径访问: <script src="../stati

仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp

原文:仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp 源代码下载地址:http://www.zuidaima.com/share/1550463482612736.htm 仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 自己在项目中有用到,用于脚本合并输出 , 使用示例: <link rel="stylesheet" type="text/css" href="http://www.zuidaima.c

对前端web js,css文件进行压缩混淆

下载 yuicompressor jar包到本地路径 写一个批处理脚本compressJs.bat,将要压缩的js文件放在批处理文件的同一路径,yuicompressor.jar也放在同一路径 运行批处理文件,在该路径下会生成一个min文件夹,里面的*.min.jar就是压缩混淆后的js文件 css文件同上操作 一下是批处理脚本的内容: echo off set PathName=%cd%set minPath=%PathName%\min if exist "%minPath%" (

Zookeeper源码学习1:win7下Ant编译Zookeeper源码为Eclipse工程

1.什么是Ant??? Apache Ant? Apache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other. The main known usage of Ant is the build of Java applic

Zookeeper源代码编译为Eclipseproject(win7下Ant编译)

为了深入学习ZooKeeper源代码,首先就想到将其导入到Eclispe中,所以要先将其编译为Eclispeproject. 1.什么是Ant??? Apache Ant? Apache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each

合并压缩css和Js的方式

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/74/] 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.有时间我会分开写其他部分的内容.这里为了节省时间,只介绍如何减少网页需要加载的外部资源,加快浏览器的响应速度. 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.

使用grunt合并压缩js、css文件

需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js

nginx js、css多个请求合并为一个请求(concat模块)

模块介绍 mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块.不过塔暂时没有包含在nginx中.这个模块类似于apache中的modconcat.如果需要使用它,需要使用两个”?”问号. 来个范例: http://example.com/??style1.css,style2.css,foo/style3.css 以上将原先3个请求合并为1个请求 如果你担心文件被用户的浏览器缓存而没有及时更新,你依旧可以带上一个版本号的参数,如下: http

使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法.啊啊啊啊啊啊啊啊阿~.最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹.坑到没朋友. 但是呢,不压缩也不是是吧? 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法.而且JS的代码也开始分块,分功能,分文件写了,尽