<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JavaScriptr &#187; Coding Practices</title>
	<atom:link href="http://www.javascriptr.com/category/coding-practices/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.javascriptr.com</link>
	<description>A blog about JavaScript and other web development technologies</description>
	<lastBuildDate>Sun, 20 Sep 2009 19:36:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Setting up a JavaScript Build Process</title>
		<link>http://www.javascriptr.com/2009/07/21/setting-up-a-javascript-build-process/</link>
		<comments>http://www.javascriptr.com/2009/07/21/setting-up-a-javascript-build-process/#comments</comments>
		<pubDate>Wed, 22 Jul 2009 04:11:07 +0000</pubDate>
		<dc:creator>Henry B.</dc:creator>
				<category><![CDATA[Coding Practices]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[ant]]></category>
		<category><![CDATA[build]]></category>
		<category><![CDATA[build process]]></category>
		<category><![CDATA[bundle]]></category>
		<category><![CDATA[yui]]></category>
		<category><![CDATA[yui compressor]]></category>

		<guid isPermaLink="false">http://www.javascriptr.com/?p=36</guid>
		<description><![CDATA[It&#8217;s important to have a build process for complex JavaScript applications. Probably not something you would setup for an average website. JavaScript builds are better suited for web applications &#038; script libraries. As Julien Lecomte said in his article about building web applications with Ant: Such applications cannot efficiently be developed without relying on a [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s important to have a build process for complex JavaScript applications. Probably not something you would setup for an average website. JavaScript builds are better suited for web applications &#038; script libraries. As Julien Lecomte said in his <a href="http://www.julienlecomte.net/blog/2007/09/16/">article about building web applications with Ant</a>:</p>
<blockquote><p>Such applications cannot efficiently be developed without relying on a solid build process to do all the dirty and repetitive work of reliably putting all the pieces together.</p></blockquote>
<p>So its about time you setup your own build process. Julien&#8217;s blog post is great but I&#8217;m gonna start with the basics and try to give you all the info you need to get up and running asap. Everything fromorganizing the directories right down to the commands to run the build. This will help you get going with something you can build on (no pun intended!).<br />
<span id="more-36"></span><br />
Over time I&#8217;ll post more advanced task I have in my build process but for now we&#8217;ll focus on the basics. At the end of this post are some links to extra resources so you can dig into more details about the tools used here.</p>
<p><strong>Directory Structure</strong><br />
<img src="http://www.javascriptr.com/wp-content/uploads/2009/07/ant_build_dir.gif" alt="Directory Structure" title="Directory Structure" width="129" height="135" class="alignright size-full wp-image-63" style="margin-top:20px;padding:5px;border:1px solid #E9EAEA;" /></p>
<ul>
<li>
My Projects:<br />
main projects folder for all your applications &#038; libraries
</li>
<li>
sample_project:<br />
sample project we&#8217;ll use to show the build process
</li>
<li>
build:<br />
the results of a successful build. These files are what get deployed to your server(s).
</li>
<li>
src:<br />
all your source code for a project
</li>
<li>
shared:<br />
resources shared between projects
</li>
<li>
bin:<br />
all the resource files required to get your build going.
</li>
<li>
external:<br />
external code shared between projects
</li>
<li>
local:<br />
local code shared between projects
</li>
</ul>
<p><strong>Resources</strong><br />
You will need some well known development tools to get this going&#8230; here&#8217;s a list with links:<br />
<a href="http://ant.apache.org/bindownload.cgi">Ant</a> &#8211; a build tool used to manage the build process.<br />
<a href="http://www.java.com/en/download/index.jsp">Java</a> &#8211; the Java Runtime Environment is required for some other tools in build process<br />
<a href="http://yuilibrary.com/downloads/#yuicompressor">YUI Compressor</a> &#8211; tool for the compression of both JavaScript and CSS files</p>
<p>Create a folder for YUI compressor in the <em>my_projects/shared/bin</em> directory then unzip and copy over the yuicompressor-x.y.z.jar file from the download.</p>
<p><strong>Ant Build Files</strong><br />
I&#8217;m far from an Ant expert but I know enough to get a basic build going so here&#8217;s an Ant build.xml for you to experiment with. Open up your favorite text/code editor and drop this xml in there. Save it to your sample_project folder as build.xml:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;ISO-8859-1&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
&nbsp;
<span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">   The &lt;project&gt; tag defines the ant project and </span>
<span style="color: #808080; font-style: italic;">   the default build task to run initiated. It </span>
<span style="color: #808080; font-style: italic;">   also defines the base directory which is set</span>
<span style="color: #808080; font-style: italic;">   to the current folder this file lives in.</span>
<span style="color: #808080; font-style: italic;">--&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;project</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;sample_project&quot;</span> <span style="color: #000066;">default</span>=<span style="color: #ff0000;">&quot;build&quot;</span> <span style="color: #000066;">basedir</span>=<span style="color: #ff0000;">&quot;.&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
   <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">      The &lt;property&gt; tag defines variables we </span>
<span style="color: #808080; font-style: italic;">      are using to store the path to different </span>
<span style="color: #808080; font-style: italic;">      files and tools required and input/output </span>
<span style="color: #808080; font-style: italic;">      directories. You use those variables by</span>
<span style="color: #808080; font-style: italic;">      like this: ${variable}</span>
<span style="color: #808080; font-style: italic;">   --&gt;</span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;BUILD_DIR&quot;</span>      <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;build&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;SOURCE_DIR&quot;</span>     <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;src&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;SHARED_DIR&quot;</span>     <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;../shared&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;EXTERNAL_DIR&quot;</span>   <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${SHARED_DIR}/external&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;LOCAL_DIR&quot;</span>      <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${SHARED_DIR}/local&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;RESOURCE_DIR&quot;</span>   <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${SHARED_DIR}/bin&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;property</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;YUI_COMPRESSOR&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;${RESOURCE_DIR}/yui-compressor/yuicompressor-2.4.2.jar&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">      The &lt;target&gt; tags defines an ant task.</span>
<span style="color: #808080; font-style: italic;">      You have to give it a unique name and</span>
<span style="color: #808080; font-style: italic;">      list other task (if any) this task </span>
<span style="color: #808080; font-style: italic;">      depends on. Ant will run those task first.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">      This task below is the default task defined</span>
<span style="color: #808080; font-style: italic;">      in the &lt;project&gt; tag. It will run all the</span>
<span style="color: #808080; font-style: italic;">      dependents.</span>
<span style="color: #808080; font-style: italic;">   --&gt;</span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;build&quot;</span> <span style="color: #000066;">depends</span>=<span style="color: #ff0000;">&quot;clean, bundle_javascript, compress_javascript&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">      This is the &quot;create JavaScript bundles&quot; task</span>
<span style="color: #808080; font-style: italic;">      used to create concatenated files for each </span>
<span style="color: #808080; font-style: italic;">      category defined and a main application bundle</span>
<span style="color: #808080; font-style: italic;">      which contains all the code we need in one file.</span>
<span style="color: #808080; font-style: italic;">   --&gt;</span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;bundle_javascript&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
      <span style="color: #808080; font-style: italic;">&lt;!-- create the output directory for built files --&gt;</span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Bundle JavaScript Files...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #808080; font-style: italic;">&lt;!-- external.js: all shared third party code --&gt;</span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;concat</span> <span style="color: #000066;">destfile</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js/external.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${EXTERNAL_DIR}/js&quot;</span> <span style="color: #000066;">casesensitive</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;include</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;**/*.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fileset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/concat<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #808080; font-style: italic;">&lt;!-- local.js: all shared local code --&gt;</span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;concat</span> <span style="color: #000066;">destfile</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js/local.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${LOCAL_DIR}/js&quot;</span> <span style="color: #000066;">casesensitive</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;include</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;**/*.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fileset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/concat<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #808080; font-style: italic;">&lt;!-- core.js: all the core project related code --&gt;</span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;concat</span> <span style="color: #000066;">destfile</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js/core.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${SOURCE_DIR}/js&quot;</span> <span style="color: #000066;">casesensitive</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;include</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;**/*.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fileset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/concat<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #808080; font-style: italic;">&lt;!-- main.js: the main big bundle of all the previous bundles --&gt;</span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;concat</span> <span style="color: #000066;">destfile</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js/main.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;filelist</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js/&quot;</span> <span style="color: #000066;">files</span>=<span style="color: #ff0000;">&quot;external.js, local.js, core.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/concat<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>JavaScript Bundles Done!!!<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
   <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">      This task will compress the main.js bundle using YUI </span>
<span style="color: #808080; font-style: italic;">      compressor and rename the file main.compress.js</span>
<span style="color: #808080; font-style: italic;">   --&gt;</span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;compress_javascript&quot;</span> <span style="color: #000066;">depends</span>=<span style="color: #ff0000;">&quot;bundle_javascript&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Compressing JavaScript Files...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;apply</span> <span style="color: #000066;">executable</span>=<span style="color: #ff0000;">&quot;java&quot;</span> <span style="color: #000066;">parallel</span>=<span style="color: #ff0000;">&quot;false&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fileset</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js&quot;</span> <span style="color: #000066;">includes</span>=<span style="color: #ff0000;">&quot;main.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">line</span>=<span style="color: #ff0000;">&quot;-jar&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>            
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">path</span>=<span style="color: #ff0000;">&quot;${YUI_COMPRESSOR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>            
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;srcfile</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>            
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;arg</span> <span style="color: #000066;">line</span>=<span style="color: #ff0000;">&quot;-o&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>            
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mapper</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;glob&quot;</span> <span style="color: #000066;">from</span>=<span style="color: #ff0000;">&quot;*.js&quot;</span> <span style="color: #000066;">to</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}/js/*.compress.js&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>            
         <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;targetfile</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/apply<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>JavaScript Compression Done!!!<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
   <span style="color: #808080; font-style: italic;">&lt;!--</span>
<span style="color: #808080; font-style: italic;">      This task will clean out any previous build files by</span>
<span style="color: #808080; font-style: italic;">      deleting the current build folder and re-creating it</span>
<span style="color: #808080; font-style: italic;">   --&gt;</span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;clean&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Delete old build folder...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;delete</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;build&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Create new build folder...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/echo<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mkdir</span> <span style="color: #000066;">dir</span>=<span style="color: #ff0000;">&quot;${BUILD_DIR}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/project<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Go over the comments to get an idea of what&#8217;s going on in this file.</p>
<p><strong>The Process</strong><br />
So what&#8217;s the process? It&#8217;s all outlined in the Ant build file. A typical JavaScript build usually consist of code concatenation, compression and deployment to a build folder ready to get used by whatever needs to consume it. Each of these task are defined as <target/> nodes. One task can trigger others based on dependencies. So in practice, once your done coding your super cool long awaited web app and your ready to test it out&#8230; pick a build task and run the build. </p>
<p><strong>Build It!!</strong><br />
To build your app you&#8217;ll need to navigate to your project folder from the command line. The same spot where the build.xml file lives. And type &#8220;ant&#8221; then the enter key. You&#8217;ll get some output on the screen as Ant goes through each task. If it fails it you&#8217;ll get something like &#8220;Build Failed&#8230;&#8221;. Double check the build file, your folders, files, paths and all that. If the build is successful then you see something like &#8220;Build Successful&#8230;&#8221;. </p>
<p>That&#8217;s it&#8230;the build folder will have all the output files. I encourage you to play around with Ant and customize the build file to something your comfortable with. </p>
<p>You can learn more about Ant from these books:<br />
<a href="http://www.amazon.com/gp/product/0596006098?ie=UTF8&#038;tag=javascriptr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=0596006098">Ant: The Definitive Guide</a><br />
<a href="http://www.amazon.com/gp/product/193239480X?ie=UTF8&#038;tag=javascriptr-20&#038;linkCode=xm2&#038;camp=1789&#038;creativeASIN=193239480X">Ant in Action</a><br />
<a href="http://www.amazon.com/gp/product/1590595599?ie=UTF8&#038;tag=javascriptr-20&#038;linkCode=xm2&#038;camp=1789&#038;creativeASIN=1590595599">Pro Apache Ant</a></p>
<p>Next time I&#8217;ll talk about creating different builds for different environments and also deploying your code to your web server.</p>
<p>Send me any questions or feedback you may have to my twitter at <a href="http://twitter.com/JavaScriptr">http://twitter.com/JavaScriptr</a> or hit me up on our <a href="http://www.javascriptr.com/contact/">contact form</a>.</p>
<p><</p>
]]></content:encoded>
			<wfw:commentRss>http://www.javascriptr.com/2009/07/21/setting-up-a-javascript-build-process/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
