使用Ant 构建web(IDEA && YUI Compressor)

  开头不知说什么好,就先说下我的开发工具吧!IntelliJ IDEA 被认为是当前Java开发效率最快的IDE工具。它整合了开发过程中实用的众多功能,几乎可以不用鼠标可以方便的完成你要做的任何事情,最大程度的加快开发的速度。简单而又功能强大。与其他的一些繁冗而复杂的IDE工具有鲜明的对比。IntelliJ IDEA 12 正式版的发布更是重新设计了名为Darcula 主题的全新用户界面。

 当然也集成了ant应用,可以方便我们快速使用Ant快速构建项目。SVN也自动帮我们集成了,我们可以方便的在编辑器上提交、更新代码。当然还有许多许多功能,有兴趣的可以去研究研究。

     好了,废话少说,现在切入主题。如何使用Ant进行web的部署发布呢?我们现在用一个真实的项目作为例子,一步一步的讲解一下。

    首先看一下项目的目录结构:

             

    project_min_out 文件夹作为项目的根目录,build 中是项目的部署工具,build_output 是部署(压缩及其合并)之后可以上线的代码,webRoot 则是整个项目的前端源代码。

             

初始的 build_output 文件夹是空的,因为我们还没有部署代码,demo.html 是项目的主页面。

先来看一下整个项目主页面的代码(demo.html):

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 2 

 3     <html xmlns="http://www.w3.org/1999/xhtml"> 

 4     <head> 

 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

 6     <title>jquery ui仿腾讯web qq界面desktop酷炫特效</title> 

 7     <meta name="description" content="jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,web qq桌面十分动感酷炫。" /> 

 8     <link rel="stylesheet" type="text/css" href="css/all.css"> 

 9     </head> 

10     <body> 

11             <div id="MainContent"> 

12                 <!--页面内容--> 

13             </div> 

14           <script type="text/javascript" src="js/all.js"></script></script> 

15         </body> 

16     </html> 

17      

 

     大家都知道,在实际开发的时候,有时页面需要引入许多css和js文件来实现很绚丽的效果,但是这样不是增加了页面请求吗?所以在我们发布web的时候, 要将css、js文件合并、压缩。那如何协调开发时代码如何部署呢?怎样部署才可以方便我们使用Ant 合并、压缩呢?

关于 js:在开发阶段,我们可以在all.js使用 document.write 语句来引入其余的 js 文件;

关于 css :在开发阶段,同样使用 css 的 @import 语句在all.css来引入其余的 css 文件;

如本项目源码:

./css/all.css:

 1     /* 

 2      * DeploymentCSSFile 

 3      */ 

 4      

 5     /*Base*/ 

 6     @import 'desktop.css'; 

 7      

 8     /*UI*/ 

 9     @import "jquery-ui-1.8.18.custom.css"; 

10     @import "smartMenu.css"; 

 

./js/all.js:

 

 1     /*Base*/ 

 2     /*jslint evil: true */ 

 3     document.write('<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>'); 

 4     document.write('<script type="text/javascript" src="js/myLib.js"></script>'); 

 5      

 6      

 7     document.write('<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>'); 

 8     document.write('<script type="text/javascript" src="js/jquery-smartMenu-min.js"></script>'); 

 9     document.write('<script type="text/javascript" src="js/jquery.winResize.js"></script>'); 

10     document.write('<script type="text/javascript" src="js/desktop.js"></script>'); 

 

引入js时,注意路径问题啊!是相对于页面的路径,不是相对于all.js的路劲。原因嘛!你懂得!只是提醒一下!

下面该说部署工具了。我们是使用Ant结合YUI-Compressor和closure-compiler 合并压缩js和css。如果有童鞋对Ant命令不是很了解,可以看看明河Ant入门指南系列文章。根据明河的建议,我们使用 closure-compiler 压缩js文件,使用 yui-compressor 压缩css文件。

首先需要配置出 Ant 的 build.xml 文件:

  1 <?xml version="1.0" encoding="UTF-8"?>

  2 

  3 <project default="compress" basedir="..\webRoot" name="core">

  4     <!-- 项目的 web 路径 -->

  5     <property name="path" value="..\webRoot"/>

  6     <!-- 部署的输出路径 -->

  7     <property name="targetDir" value="../build_output"/>

  8     <!-- 源文件路径(src) -->

  9     <property name="code.src" value="..\webRoot"/>

 10     <property name="baseService" value="baseService"/>

 11     <!--建议使用 closure-compiler 压缩js文件,使用 yui-compressor 压缩css文件 -->

 12     <!-- !!! YUI Compressor 路径 !!! -->

 13     <property name="yuicompressor" location="../build/yui-compressor/yuicompressor-2.4.8pre.jar"/>

 14     <!-- !!! closure-compiler 路径  !!! -->

 15     <property name="closure.path" location="../build/closure-compiler/compiler.jar"/>

 16 

 17 

 18     <!-- =================================

 19        target: init 初始化输出目录

 20       ================================= -->

 21     <target name="init">

 22         <echo message="begin to init the init"/>

 23         <echo message="delete all reference files."/>

 24         <delete dir="${targetDir}"/>

 25         <echo message="delete end"/>

 26         <echo message="make the reference files."/>

 27         <mkdir dir="${targetDir}"/>

 28         <echo message="make end."/>

 29     </target>

 30 

 31 

 32     <!-- ================================= 

 33       target: concat 拼接(合并)文件        

 34      ================================= -->

 35 

 36     <target name="concat" depends="init" description="concat code">

 37         <echo message="Concat Code Files Begin!!!"/>

 38         <!-- 需要注意这里的拼接顺序 --><!-- JS -->

 39         <concat destfile="${targetDir}/js/all.js" encoding="utf-8" fixlastline="on">

 40             <fileset dir="${code.src}/js" includes="jquery-1.7.1.min.js"/>

 41             <fileset dir="${code.src}/js" includes="myLib.js"/>

 42             <fileset dir="${code.src}/js" includes="jquery-ui-1.8.18.custom.min.js"/>

 43             <fileset dir="${code.src}/js" includes="jquery-smartMenu-min.js"/>

 44             <fileset dir="${code.src}/js" includes="jquery.winResize.js"/>

 45             <fileset dir="${code.src}/js" includes="desktop.js"/>

 46         </concat>

 47         <!-- CSS -->

 48         <concat destfile="${targetDir}/css/all.css" encoding="utf-8">

 49             <fileset dir="${code.src}/css" includes="desktop.css"/>

 50             <fileset dir="${code.src}/css" includes="jquery-ui-1.8.18.custom.css"/>

 51             <fileset dir="${code.src}/css" includes="smartMenu.css"/>

 52         </concat>

 53 

 54         <echo message="Concat Code Files Finished!!!"/>

 55     </target>

 56 

 57     <!-- ================================= 

 58           target: copy 拷贝文件 

 59          ================================= -->

 60 

 61     <target name="copy_asset" depends="concat" description="copy the asset file">

 62         <echo message="Copy Asset Begin"/>

 63         <!-- main.html -->

 64         <copy todir="${targetDir}/" overwrite="true">

 65             <fileset dir="${path}/" includes="*.html"/>

 66         </copy>

 67         <!-- img * -->

 68         <copy todir="${targetDir}/images" overwrite="true">

 69             <fileset dir="${path}/images" includes="*"/>

 70         </copy>

 71         <copy todir="${targetDir}/icon" overwrite="true">

 72             <fileset dir="${path}/icon" includes="*"/>

 73         </copy>

 74 

 75         <echo message="Copy Asset Finished"/>

 76     </target>

 77 

 78 

 79     <!-- ================================= 

 80           target: compress 压缩 js && css  

 81          ================================= -->

 82 

 83     <target name="compress" depends="copy_asset" description="compress code">

 84         <echo message="Compress Code Begin"/>

 85 

 86         <apply executable="java" verbose="true" dest="${targetDir}/js" failonerror="true" parallel="false">

 87             <fileset dir="${targetDir}/js" includes="*.js"/>

 88             <arg line="-jar"/>

 89             <arg path="${closure.path}"/>

 90             <arg value="--warning_level"/>

 91             <arg value="QUIET"/>

 92             <arg value="--js"/>

 93             <srcfile/>

 94             <arg value="--js_output_file"/>

 95             <targetfile/>

 96             <mapper type="glob" from="*.js" to="*-min.js"/>

 97         </apply>

 98 

 99         <apply executable="java" verbose="true" dest="${targetDir}/css" failonerror="true" parallel="false">

100             <fileset dir="${targetDir}/css" includes="*.css"/>

101             <arg line="-jar"/>

102             <arg path="${yuicompressor}"/>

103             <arg line="--charset utf-8"/>

104             <arg value="--type"/>

105             <arg value="css"/>

106             <arg value="-o"/>

107             <targetfile/>

108             <mapper type="glob" from="*.css" to="*-min.css"/>

109         </apply>

110 

111         <echo message="Compress Code Finished"/>

112 

113         <echo message="Clean Begin"/>

114         <!-- =================================

115                move: *-min.js/*-min.css 转换为 *.js/*.css

116               ================================= -->

117         <move file="${targetDir}/js/all-min.js"

118               tofile="${targetDir}/js/all.js"/>

119         <move file="${targetDir}/css/all-min.css"

120               tofile="${targetDir}/css/all.css"/>

121 

122         <echo message="Clean Finished"/>

123 

124     </target>

125 </project>

 

这里小白有个疑问,为什么我配置<mapper type="glob" from="*.js" to="*.js"/>,js不会被压缩呢? 而配置了<mapper type="glob" from="*.js" to="*-min.js"/>就可以压缩了呢? 希望高手指点一二,在下不胜感激。

好了,我们可以运行Ant。如何运行呢?来看看我们的IDEA 编辑器。

    有没有看到Ant Build的选项卡,还有个紫色的小蚂蚁。去点点看吧:

    

 然后点击,选择刚才我们创建的build.xml文件,点击OK后,显示如下:

 

点击下运行,这时IDEA下放会显示运行过程,当顺利运行结束后,会显示如下:

再来看看我们的build_output目录:

这样我们就用Ant快速部署了web,以后代码修改后,只要运行下Ant,需要上线的web已经为我们合并压缩好了。

 源代码:http://dl.vmall.com/c0yymybdr7

你可能感兴趣的:(compress)