16
05/24/22 HUGE / ParentsConnect / 1 HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com step-by-step guide Ant Build Tool May 22nd, 2008

Ant Build Tool

Embed Size (px)

DESCRIPTION

Using Ant with Yahoo Compressor

Citation preview

Page 1: Ant Build Tool

04/12/23HUGE / ParentsConnect / 1

HUGE45 Main Street, 2nd Floor NY NY 11201718.625.4843 www.hugeinc.com

step-by-step guide

Ant Build Tool

May 22nd, 2008

Page 2: Ant Build Tool

HUGE / Ant 2

Introduction

• Ant is a Java-based build tool. • It is kind of like Make, without Make's

wrinkles and with the full portability of pure Java code.

Page 3: Ant Build Tool

HUGE / Ant 3

Prerequisites

• apache ant (http://ant.apache.org/)

• yui compressor (http://developer.yahoo.com/yui/compressor/)

• yui compressor ant task (http://code.google.com/p/javaflight-code/)

Page 4: Ant Build Tool

HUGE / Ant 4

Installation

• download ant binary files, uncompress it, and add bin folder to system path

• download yahoo compressor and copy yuicompressor-x.x.x.jar to ant’s lib folder

• download yahoo compressor ant task and copy yui-compressor-ant-taks-x.x.jar to ant’s lib folder

Page 5: Ant Build Tool

HUGE / Ant 5

Folder Structure

• trunk/deploy– /wwwroot

• /css• /js• /img• /inc

– build.xml– /wwwroot-compressed

Page 6: Ant Build Tool

HUGE / Ant 6

1. Build Script

<project name=“HUGE" default="build" basedir=".">

<taskdef name="yui-compressor" classname="net.noha.tools.ant.yuicompressor.tasks.YuiCompressorTask"></taskdef>

<property name="src" location="wwwroot"/>

<property name="build" location="wwwroot-compressed"/>

...

</project>

Page 7: Ant Build Tool

HUGE / Ant 7

2. Build Script

<target name="build" description="generate the distribution">

</target>

Page 8: Ant Build Tool

HUGE / Ant 8

3. Build Script

<target name="compress" depends="build" description="compress javascript and css">

</target>

Page 9: Ant Build Tool

HUGE / Ant 9

4. Build Script (clean target)

<target name="clean" description="clean up">

<delete dir="${build}">

<include name="**/*"/>

</delete>

</target>

Page 10: Ant Build Tool

HUGE / Ant 10

5. Build Script (build target)

<copy todir="${build}">

<fileset dir="${src}" excludes="css/global/,css/weeks/,js/global/,js/weeks/" />

</copy>

<concat destfile="${build}/js/min/weeks.js">

<fileset dir="${src}/js/global/"/>

<fileset dir="${src}/js/weeks/"/>

</concat>

<concat destfile="${build}/css/min/weeks.css">

<fileset dir="${src}/css/global/"/>

<fileset dir="${src}/css/weeks/"/>

</concat>

Page 11: Ant Build Tool

HUGE / Ant 11

6. Build Script (build target)

<move file="${build}/inc/weeks/head-css-min.jsp"

tofile="${build}/inc/weeks/head-css.jsp"/>

<move file="${build}/inc/weeks/head-js-min.jsp"

tofile="${build}/inc/weeks/head-js.jsp"/>

Page 12: Ant Build Tool

HUGE / Ant 12

7. Build Script (head-css)

<%@ include file="inc/weeks/head-css.jsp" %>

<link rel="stylesheet" type="text/css" href="css/global/01-reset.css" />

<link rel="stylesheet" type="text/css" href="css/global/02-font.css" />

<link rel="stylesheet" type="text/css" href="css/global/03-global.css" />

<link rel="stylesheet" type="text/css" href="css/global/box.css" />

<link rel="stylesheet" type="text/css" href="css/global/footer.css" />

<link rel="stylesheet" type="text/css" href="css/global/header.css" />

<link rel="stylesheet" type="text/css" href="css/min/weeks.css" />

(head-css-min.jsp)

Page 13: Ant Build Tool

HUGE / Ant 13

8. Build Script (head-js)

<%@ include file="inc/weeks/head-js.jsp" %>

<script type="text/javascript" src="js/global/0_jquery-1.2.4.min.js"></script>

<script type="text/javascript" src="js/weeks/0_ui.core.min.js"></script>

<script type="text/javascript" src="js/weeks/1_ui.accordion.min.js"></script>

<script type="text/javascript" src="js/weeks/2_ui.tabs.min.js"></script>

<script type="text/javascript" src="js/min/weeks.js"></script>

(head-js-min.jsp)

Page 14: Ant Build Tool

HUGE / Ant 14

9. Build Script (compress target)

<mkdir dir="${build}/js/compress"/>

<yui-compressor warn="false“ munge="true“ jsSuffix=".js“ preserveallsemicolons="false“

fromdir="${build}/js" todir="${build}/js/compress">

</yui-compressor>

<copy todir="${build}/js">

<fileset dir="${build}/js/compress"/>

</copy>

<delete dir="${build}/js/compress"/>

Page 15: Ant Build Tool

HUGE / Ant 15

10. Build Script (compress target)

<mkdir dir="${build}/css/compress"/>

<yui-compressor warn="false” munge="true“ cssSuffix=".css"

fromdir="${build}/css“ todir="${build}/css/compress">

</yui-compressor>

<copy todir="${build}/css">

<fileset dir="${build}/css/compress"/>

</copy>

<delete dir="${build}/css/compress"/>

Page 16: Ant Build Tool

HUGE / Ant 16

Build Sucessfull