JavaScript Component Tour (iii): Building components with Ant _javascript tips

Does it sound cozy? Let ' s go! Let's Go!

In this issue, we will use Ant to merge the code files written and collated in the previous period into a single source file in the order specified, and then compress the file. This is the basic step in building a JavaScript project. Ant is a top open source project in Apache, the introduction and installation of it on the Internet, there are many articles, here is no longer to repeat. Before we build, let's take a look at the existing file layouts:

component's root directory
    //Smart Queue Master File

Now, we're going to make it "plump":

• Component root directory Add:
  • README: Introducing the Smart Queue component
  • LICENSE: Authorization Information for components
  • Configuration files used by build.xml:Ant
• Add Lib subdirectory under component root: Store external programs and library files that need to be used in the build process
  • LIB subdirectory add Yuicompressor.jar: We use YUI compressor Compressed JavaScript
• Add test subdirectory under Component root: Files required to store test components (next introduction)
• Add intro.js to the SRC directory: Introduction to the component version and description information

Though small, spite. Now the Smart Queue looks like a more professional JavaScript project:

The component's root directory
          //component licensing information

We plan to store the built files into the build subdirectory under the component root and create and destroy it through the build tools. Before attempting to build for the first time, it is advisable to have a general idea of the structure of the ANT configuration file--build.xml:

<Project Name="MyProject" Default="Dist" Basedir="."> <Description>Simple example Build file</Description> <!--The set global properties for this build--> <Property Name="SRC" Location="SRC"/> <Property Name="Build" Location="Build"/> <Property Name="Dist" Location="Dist"/> <Target Name="Init"> <!--Create The time stamp--> <Tstamp/> <!--Create The build directory structure used by compile--> <Mkdir Dir="${build}"/> </Target> <Target Name="Compile" Depends="Init"  Description= compile the source  >  <!  --Compile The Java code from ${SRC to ${build}-- >   javac   srcdir=  "${src}"   destdir=  "${build}" />  </ target  > ;  target   name=  "clean"   description=  "clean up"  >  <!  --Delete The ${build} and ${dist directory Trees-- >   Delete   dir=  "${build}" span>/>   Delete   dir=  "${dist}" />  </ target  >  </ Project                

Carefully observed, except that name, description these names are easy to understand, other laws that can be seen include:

• projectThe attribute value of the element default corresponds target to the attribute of an element name ;
• targetThe attribute value of the element depends corresponds target to the attributes of some other element name ;
• ${somename}You can reference the property values defined in.

Here we begin to write our own build.xml.

First, configure the basic information for the project, the associated directory name, the encoding that will be used, and so on:

<Project Name="Smart Queue" Default="Compress" Basedir=. "  >   description  >build file for Ant  </ Description  >  <  Property   name=  "src"   location=  "src" />    name=  build   location=  ' build ' />  \  Property   name=  "Lib"   location=  "Lib" /> ,  property   name=  inputencoding   value=  "utf-8" />   name=  "Outputencoding"   value=  "GBK" />          

Next, define one for initialization target , which is responsible for creating the build subdirectory:

  <targetname="Init"<mkdirdir="${build}"</target> 

Then the definition is named, which is concat target responsible for connecting the 3 JavaScript files in src sequentially. Run it first to run the previously defined init :

   target   name=  "concat"   depends=  "init"  >  <  concat   destfile=  "${build}/smart-queue.source.js"   encoding=  "${ inputencoding} "  outputencoding=  ${outputencoding}"  >  filelist   dir=  "${src}"   files=  "Intro.js, Lang.js, smart-queue.js" />  </ Concat  >  </ target    "       

In this way, you can get a working JavaScript file, the following is target responsible for compressing the file, obviously it depends on concat , but also depends on init , but do not have to explicitly specify the init dependencies of the--ant can handle this dependency. Here call YUI compressor and pass in the appropriate parameters:

  <targetname="compress"depends="concat"<javajar="${lib}/" Yuicompressor.jar "fork=" true "<argline="--type js--charset utf-8-o ${build}/ Smart-queue.js ${build}/smart-queue.js "</java</target>   

Done, the compress processed files can be deployed to the production system. Finally, let's do some cleanup work so that you can return to the original state after you generate the file:

  <targetname="clean"<deletedir="${build}"</target> 

This can be said that the basic configuration was finished. How do you use it? Enter the component root directory (or the directory where build.xml resides) on a command-line basis, and then:

• Run ant concat , will get./build/smart-queue.source.js
• Run ant , the one that will be referenced in the selection <project> , that default target is compress , so will get. Smart-queue.source.js and Smart-queue.js under/build
• Run ant clean , will delete the./build directory, back to the original state

These prerequisites are that you have installed or set up the JDK and Ant correctly, and you may need to check that they are ready if they are prompted to do so.

Look down the road, is not that this period introduced the things are simple? Of course, building tools should be easy to use, or would it not be worth spending a lot of time on that? The value of a tool is to increase productivity and thereby create more value.

Finally, you can check out the Ant Help document here (there are a lot of fun stuff in it), or you can view the complete Build.xml file for this issue here.