開頭不知說什么好，就先說下我的開發工具吧！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已經為我們合並壓縮好了。