ANT 构建工具低调入门

        Ant 是Javascript 领域应用相当广泛的一种构建工具， 在其他语言项目中的应用也是多见，  本想看看书了解下就过去了，看完感觉东西不少没有必要自己亲自敲一敲代码搞一搞，以后不用的上不说，至少不白看。工作中，我用的是maven ，两个是有相同之处的。本文将从实用角度出发，从ant安装到自动化构建检测js 代码的流程详细记录分析， 以供学习，参考。

      

    $下载$

    可以去ant的官网（http://ant.apache.org）下载ant运行库，写此文的时候最新版本是1.9.7 ，好像暴露了自己学的有点晚啊。 不过，无妨！ 学了就ok ！ 

    

   

    $安装$

    下载的是 apache-ant-1.9.7-bin.zip 压缩包，解压在一个目录，比如说 D:\supermap\Ant ，然后就可以去配置环境变量了， 新建一个ANT_HOME 的系统变量，赋值为 D:\supermap\Ant， 然后再path 变量中新增 “%ANT_HOME%\bin;  在classpath 中新增 “%ANT_HOME%\lib”;  即可。 验证方式，命令行中输入 ant 回车，可以看到一下输出：

    或者输入ant -version :

看到以上信息，就可以知道ant 在本机已经安装成功，可以使用了！

       $使用$

    maven 依赖于pom 文件。ant依赖于build.xml 文件才能运行。 这个build文件一般放在项目的根目录处。可以不在此文件中保存项目所有的构建相关信息【可以分散到其他文件中】，但ant 运行的时候该文件必须存在。

    

    $示例一 : 执行最简单的ant 构建/ 输出一个hello world $  

build.xml 中内容如下:

    <project name="firstProject" default="hello">    //定义项目名称，name 用来唯一标识这个项目，                                                                                default属性所指示的标签会被认做默认目标来执行。
        <target name="hello">           //name 为hello 的标签，对应项目的default ，其中的内容就是待执                                                            行的目标。
            <echo>Hello World! </echo>    //echo标签标识一个回显任务，它将在控制台输出所包含的文                                                                    本信息。
        </target>
   </project>

 执行构建： 在build文件所在目录打开命令行，执行ant hello结果如下【默认ant会在命令行当前的文件下寻找build.xml 文件】，这里只输入ant 也会输出如下结果，因为默认目标是hello。

        $示例二: 依赖操作$

        各个目标之间可以被指定依赖关系。通过depends属性来指定。多个依赖之间用半角的逗号来分隔。被依赖的目标将首先被执行。

       

 <project name="dependsSample" default="hello">
                <target name="hello">
                    <echo> Hello World </echo>
                </target>

                <target name="goodbye" depends="hello">     //依赖于hello 目标
                        <echo> GoodBye Boy!</echo>
                </target>
        </project>

   打开命令行，输入ant goodbye 会输出如下结果，可以看出，hello 目标也被执行了。

    $示例三    属性/变量$

    ant 中可以定义属性，通过property 标签，然后通过${name} 来调用。

    1、内部定义直接调用：

    <project name="propertyTest" default="attr">
                <property name="version" value="1.0.1" />     //声明变量 version  并赋值为“1.0.1”

                <target name="attr">
                        <echo> ${version} </echo>           //调用变量
                </target>
        </project>

执行结果如下：  可以正常输出变量值

    

    $示例四： 引用外部文件中的变量$

    2、引用外部文件中的变量 <loadproperties>标签可以通过 srcfile 属性指明文件路径来将properties文件中的变量属性导入ant脚本中

    

    build.properties文件中内容如下：

 

        version = 1.1.0
        copyright = Copyright 2016 Zhang C. All rights reserved




    build.xml文件中代码如下：

        <project name="fileAttr" default="fileTest">
                    <loadproperties srcfile="build.properties" />        //指定路径，引入文件

                    <target name="fileTest">
                            <echo> Version is ${version} </echo>        //直接调用变量
                            <echo> CopyRight is ${copyright} </echo>
                    </target>
          </project>

执行结果如下：

    

    

    $示例五：  查找文件$

    我们使用ant 构建项目，是想ant能帮助我们自动化的构建我们的项目，那么构建项目之前，不能缺少的项目就是 ： 检测！检验文件。 js 文件在部署之前都是没编译过的，web开发人员通常又不能再编译之前发现某些问题，所以我们需要借鉴一定的工具，来实现静态分析， JSHint 和JSLint 可以帮助我们实现该目的。

    当然，我们想分析验证文件，第一步就是定位找到这些文件。

    <fileset> 可以通过通配符的方式来查到文件。有dir 属性设置路径  和 includes  设置包含文件， 还有一个excludes 用以 设置排除哪些文件。

    示例五： 仅示例，无法执行

    <project name="findFile" default="file">
            <fileset dir="./src" includes="*.js" />    //设置包含哪些文件  

            <fileset dir="./src" includes="*.js" excludes="*-test.js">    //设置包含哪些文件并且排除哪些文                                                                                                            件，排出测试文件常用技巧

        </project>

    

    $示例六   复杂任务--对js文件进行静态检测$

      <apply> 标签用以对一个ant 目标里面的文件集合执行命令行程序。  我们相用JSHint 来检测js 代码，那么 首先来看，如果没有ant 如何使用JSHint 来执行js文件的检测呢？   其中一种是node 命令，另外一种是Rhino 命令，我们这次演示第二种， Rhino 命令。 首先在 http://jshint.com/install/ 下载 Rhino 版本的JSHint ，然后我们还需要下载 Rhino  ，地址是 https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino/Download_Rhino ，  

好麻烦，鉴于现在各个平台都集成了JSHint 插件，这里就不搞这个ant 了。

        $示例七  文件合并与加工$

    <concat> 标签可以将目标目录下的文件合并到一起。并在指定的构建目录下生成新的指定文件。 默认合并顺序是按照它们在文件系统中的顺序（字幕顺序）合并的，如果需要指定顺序，则需要显示的指定它。

首先建立相关文件目录如下：

|- src

    |- first.js

    |-second.js

|-build

|-build.xml

|-build.properties

build.properties文件作为目录配置文件，里面只指定了两个目录相关的变量：

build.dir = ./build

src.dir = ./src

两个js 中的文件内容分别如下：

first ：

second：

注意：first.js 文件中 我有故意在文件最后留出一行空格。具体作用看下文。

build.xml 文件中内容如下：

<project name="hebing" default="run">
    <loadproperties srcfile="build.properties" />    //加载配置文件
    <target name="run"> 
        <concat destfile="${build.dir}/build.js">      //指定合并后的文件名与位置
            <fileset dir="${src.dir}" includes="**/*.js" />    //指定合并文件来源
        </concat>
    </target>
</project>

运行结果：

会在build 目录下生成一个build.js 文件。

内容如下：

可以看出合并后中文注释都乱码了， 看来得找个变量指定编码；【暂时还不知道！】

说说刚在那个预留的空格，如果不预留，那合并的时候文件内容就会直接跟在后边：效果如下：

所以文件尽量还是留几行空格！

那么我们说说怎么指定文件合并的顺序。

<project name="hebing" default="run">
    <loadproperties srcfile="build.properties" />
    <target name="run">
        <concat destfile="${build.dir}/build.js">
            <filelist dir="${src.dir}" files="second.js，first.js" />   //用以指定文件合并顺序
            <fileset dir="${src.dir}" includes="**/*.js" />
        </concat>
    </target>
</project>

那么我们说 上一个问题 ： 文件结尾换行符的问题

    <concat>  有一个fixlastline 属性， 把该值设置为 “yes”，合并的时候就会在文件结尾自动的加入一个 换行符。

    （其他的代码省略了）

<concat destfile="${build.dir}/build.js" fixlastline="yes" eol="lf">

  eol = "if" 属性用以指定使用哪种换行符【不同的操作系统不一样】，推荐使用UNIX 中的 “lf”，因为它具有非常好的跨平台兼容性。

《未完待续。。。。》