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, description
These names are easy to understand. Other rules that can be seen include:
project
Elementdefault
The property value corresponds totarget
Elementname
Attribute;
target
Elementdepends
Attribute values correspond to othertarget
Elementname
Attribute;
${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, definetarget
It is responsible for creating build subdirectories:
<target name="init"> <mkdir dir="${build}"/> </target>
Then define the nameconcat
Oftarget
Connects 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" encoding="${inputencoding}" outputencoding="${outputencoding}"> <filelist dir="${src}" files="intro.js, lang.js, smart-queue.js" /> </concat> </target>
In this way, you can obtain a JavaScript file that can work.target
Is responsible for compressing this file, obviously it depends onconcat
, Also depends oninit
But you do not need to explicitly specifyinit
Ant 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"/> </java> </target>
Success,compress
The 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:
- Run
ant concat
, Will get./build/smart-queue.source.js
- Run
ant
, Select<project>
Mediumdefault
The referencedtarget
, That iscompress
So you will get the smart-queue.source.js and smart-queue.js under./build
- Run
ant clean
Will 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.