使用Ant 构建web（IDEA && YUI Compressor）
2013-01-14 15:46 by 醉月轩, 94 阅读, 0 评论, 收藏, 编辑
开头不知说什么好，就先说下我的开发工具吧！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="yui-compressor/yuicompressor-2.4.8pre.jar" /> 14 <!-- !!! closure-compiler 路径 !!! --> 15 <property name="closure.path" location="closure-compiler/compiler.jar"/> 16 17 <!-- ================================= 18 target: concat 拼接（合并）文件 19 ================================= --> 20 21 <target name="concat" depends="" description="concat code"> 22 <echo message="Concat Code Files Begin!!!" /> 23 <!-- 需要注意这里的拼接顺序 --><!-- JS --> 24 <concat destfile="${targetDir}/js/all.js" encoding="utf-8" fixlastline="on"> 25 <fileset dir="${code.src}/js" includes="jquery-1.7.1.min.js" /> 26 <fileset dir="${code.src}/js" includes="myLib.js" /> 27 <fileset dir="${code.src}/js" includes="jquery-ui-1.8.18.custom.min.js" /> 28 <fileset dir="${code.src}/js" includes="jquery-smartMenu-min.js" /> 29 <fileset dir="${code.src}/js" includes="jquery.winResize.js" /> 30 <fileset dir="${code.src}/js" includes="desktop.js" /> 31 </concat> 32 <!-- CSS --> 33 <concat destfile="${targetDir}/css/all.css" encoding="utf-8"> 34 <fileset dir="${code.src}/css" includes="desktop.css" /> 35 <fileset dir="${code.src}/css" includes="jquery-ui-1.8.18.custom.css" /> 36 <fileset dir="${code.src}/css" includes="smartMenu.css" /> 37 </concat> 38 39 <echo message="Concat Code Files Finished!!!" /> 40 </target> 41 42 <!-- ================================= 43 target: copy 拷贝文件 44 ================================= --> 45 46 <target name="copy_asset" depends="concat" description="copy the asset file"> 47 <echo message="Copy Asset Begin" /> 48 <!-- main.html --> 49 <copy todir="${targetDir}/" overwrite="true"> 50 <fileset dir="${path}/" includes="*.html"/> 51 </copy> 52 <!-- img * --> 53 <copy todir="${targetDir}/images" overwrite="true"> 54 <fileset dir="${path}/images" includes="*" /> 55 </copy> 56 <copy todir="${targetDir}/icon" overwrite="true"> 57 <fileset dir="${path}/icon" includes="*" /> 58 </copy> 59 60 <echo message="Copy Asset Finished" /> 61 </target> 62 63 64 <!-- ================================= 65 target: compress 压缩 js && css 66 ================================= --> 67 68 <target name="compress" depends="copy_asset" description="compress code"> 69 <echo message="Compress Code Begin" /> 70 71 <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/js"> 72 <fileset dir="${targetDir}/js" includes="*.js"/> 73 <arg line="-jar"/> 74 <arg path="${closure.path}" /> 75 <arg line="--charset utf-8" /> 76 <arg line="-o" /> 77 <targetfile/> 78 <mapper type="glob" from="*.js" to="*.js" /> 79 </apply> 80 81 <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/css"> 82 <fileset dir="${targetDir}/css" includes="*.css"/> 83 <arg line="-jar"/> 84 <arg path="${yuicompressor}" /> 85 <arg line="--charset utf-8" /> 86 <arg line="-o" /> 87 <targetfile/> 88 <mapper type="glob" from="*.css" to="*.css" /> 89 </apply> 90 91 <echo message="Compress Code Finished" /> 92 93 <echo message="Clean Begin" /> 94 95 <!--<delete verbose="false" failonerror="true"> 96 <fileset dir="${path}" includes="${targetDir}/*-o.js" /> 97 </delete> --> 98 99 <echo message="Clean Finished" /> 100 101 </target> 102 </project>
好了，我们可以运行Ant。如何运行呢？来看看我们的IDEA 编辑器。
有没有看到Ant Build的选项卡，还有个紫色的小蚂蚁。去点点看吧：
然后点击
，选择刚才我们创建的build.xml文件，点击OK后，显示如下：
点击下运行
，这时IDEA下放会显示运行过程，当顺利运行结束后，会显示如下:
再来看看我们的build_output目录：
这样我们就用Ant快速部署了web，以后代码修改后，只要运行下Ant，需要上线的web已经为我们合并压缩好了。
源代码：http://down.51cto.com/data/660135
