使用Ant 构建web（IDEA && YUI Compressor）
2013-01-14 15:46 醉月轩 阅读(4989) 评论(3) 编辑 收藏 举报开头不知说什么好，就先说下我的开发工具吧！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已经为我们合并压缩好了。
