JavaScript component journey (III): using Ant to build component _ javascript skills

Where did we go? I thought too much in the first two phases. Do you have any intention? Don't worry, this topic is very easy. You only need to simply understand some syntax and write a few lines of configuration to drive the system to automatically complete some work as you preset. Does it sound cool? Let's go! Let's go ~

In this issue, Ant will be used to merge the code files written and organized in the previous period into a single source file in the specified order, and then compress the file. This is the basic step for building a JavaScript project. Ant is a top-level open-source project of Apache. Many articles have been introduced and installed on the Internet, so I will not go into details here. Before building, let's take a look at the existing file layout:

Smart-queue// Component root directory+ --- Src// JavaScript source file directory+ --- Lang. js// The "external file" mentioned above"+ --- Smart-queue.js// Master Smart Queue File

Now, let's make it "plump:

• Add the following in the root directory of the component:
  • README: Introduction to the Smart Queue Component
  • LICENSE: authorization information of components
  • Build. xml: configuration file used by Ant
• Add the lib subdirectory under the root directory of the component: store the external programs and library files that need to be used during the build process
  • Add yuicompressor. jar to the lib subdirectory: We use YUI Compressor to compress JavaScript.
• Add the test sub-directory under the root directory of the component: store the files required for the test component (next section)
• Add intro. js to the src directory: Describes the version and description of the component.

The sparrow is small and dirty. Now Smart Queue looks like a professional JavaScript project:

Smart-queue// Component root directory+ --- Lib// JavaScript external program and library file directory+ --- Yuicompressor. jar// YUI Compressor+ --- Test// Test file directory+ --- Src// JavaScript source file directory+ --- Intro. js// Introduction and version information+ --- Lang. js// The "external file" mentioned above"+ --- Smart-queue.js// Master Smart Queue File+ --- README// Component self-report file+ --- LICENSE// Component authorization information

We plan to store the built file to the build subdirectory under the component root directory, and create and destroy it through the build tool. Before you try to build the SDK for the first time, we recommend that you first understand the Ant configuration file-build. xml structure:

<project name="MyProject" default="dist" basedir=".">  <description>    simple example build file  
  description> 
   -- 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} into ${build} --> <javac srcdir="${src}" destdir="${build}"/> 
        target> <target name="clean" description="clean up" > 
         -- Delete the ${build} and ${dist} directory trees --> <delete dir="${build}"/> <delete dir="${dist}"/> 
          target>
           project>

Take a closer look,name, descriptionThese names are easy to understand. Other rules that can be seen include:

• projectElementdefaultThe property value corresponds totargetElementnameAttribute;
• targetElementdependsAttribute values correspond to othertargetElementnameAttribute;
• ${somename}Can be referencedproperty.

Next we start to write our own build. xml.

First, the basic information of the configuration item, the related directory name, And the encoding to be used:

<project name="Smart Queue" default="compress" basedir=".">  <description>Build file for Ant
  description>  <property name="src" location="src" />  <property name="build" location="build" />  <property name="lib" location="lib"/>  <property name="inputencoding" value="utf-8"/>  <property name="outputencoding" value="gbk"/>

Next, definetargetIt is responsible for creating build subdirectories:

  <target name="init">    <mkdir dir="${build}"/>  
  target>

Then define the nameconcatOftargetConnects the three JavaScript files in src in sequence. To run it, run the previously definedinit:

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

In this way, you can obtain a JavaScript file that can work.targetIs responsible for compressing this file, obviously it depends onconcat, Also depends oninitBut you do not need to explicitly specifyinitAnt can process this dependency. Call YUI Compressor and input the appropriate parameters:

  <target name="compress" depends="concat">    <java jar="${lib}/yuicompressor.jar" fork="true">      <arg line="--type js --charset utf-8 -o ${build}/smart-queue.js ${build}/smart-queue.js?1.1.15"/>    
  java>  
   target>

Success,compressThe processed files can be deployed to the production system. Finally, we will clean up the file so that you can return to the initial state after generating the file:

  <target name="clean">    <delete dir="${build}"/>  
  target>

At this point, we can say that the basic configuration is complete. How to use it? Enter the component root directory (or build. xml directory) as a command line, and then:

• Runant concat, Will get./build/smart-queue.source.js
• Runant, Select MediumdefaultThe referencedtarget, That iscompressSo you will get the smart-queue.source.js and smart-queue.js under./build
• Runant cleanWill delete the./build directory and return to the initial state

The premise is that you have correctly installed or configured JDK and Ant. If an error is prompted, you may need to check whether they are properly installed.

All the way, do you think the content introduced in this article is very simple? That is, of course, the building tool should be simple and easy to use. Otherwise, it is not worthwhile to spend a lot of time on it? The value of tools lies in improving productivity and thus creating more value.

Finally, you can view Ant's help documentation (there are a lot of interesting stuff in it), or the complete build. xml file in this issue.