Ant getting started-Web Front-end development 7 weapons (1)

Weapon Archives

• Name: Apache ant
• Latest Version: 1.8.2
• Purpose: file build tool
• Download: http://labs.renren.com/apache-mirror//ant/binaries/apache-ant-1.8.2-bin.zip
• Ant documentation: http://ant.apache.org/manual/index.html
• Required indexes:
• Difficulty:

Ant is currently the most popular open source build tool in China and is widely used in Java engineering construction. Maybe you may be confused. As a dynamic language, JS does not need to be compiled. Why does it need a build tool like ant? Ant can help front-end engineers solve those problems? What are the advantages and disadvantages of building JS and CSS with ant? How to Use ant? In this series of tutorials, minghe will answer these questions one by one.

1. Why do front-end engineers need ant?

Let's look at a classic Application Scenario:
In your page you need to reference A Lot Of jquery plug-ins, such as plug-1.js, plug-2.js, plug-3.js... Yslow's first advice on front-end performance optimization is to keep as few JS and CSS references as possible on the page. Obviously this scene violates this suggestion, so we need to merge these JS plug-ins, merged into a plug-combine.js file, the traditional approach is to merge human flesh, the previous River is also so dry, but encountered the following troubles, plug-1.js is self-written plug-ins, often want to update the code of this file, every time the update is complete to re-human updates under the plug-combine.js, as a lazy, river in thinking, "Is there a tool that can help me automatically Merge files? Of course, after merging, it would be even better to automatically call the compression tool to compress the file !". Ant, a magic little tool, is used to help the front-end steal such a lazy!

What can ant do for the front end?

• Merge JS/CSS files;
• Call Yui compressor to automatically compress CSS files and call Google closure compiler to automatically compress JS files;
• Quick batch copy/delete of specified files;
• Call the jsdoc tool to automatically generate JS documents;
• Connect to FTP and quickly publish the code to the specified server;
• Automatically uploads files to SVN;
• Automatically package it into a zip file
• ...

Ant provides a complete set of task lists to free you from repetitive time-consuming building processes! Is it exciting to see ant, the magic ant, do so many things? Then follow the Ming River to learn how to use ant.
Minghe should emphasize that ant is very simple. As long as you have enough patience, you can master how to use it within one day.

2. Install ANT1) download ant (okay, this is nonsense -_-!)

The ant file you downloaded should contain the following files:

2) install the Java Runtime Environment

Ant is a Java program, so it depends on the Java Runtime Environment. If your machine has installed JDK, skip this step. If not, download JDK first.
(PS: Run "cmd" and type "javac". If the following interface is displayed, the Java environment is OK .)

If "'javac' is not an internal or external command, or a program or batch file that can be run .", Set the Java environment variable.
For the setting method, see Yui compressor Quick Start Guide-Web Front-end development seven weapons, which was previously written by minghe.

3) Configure Environment Variables

Right-click "computer" and click "system settings". The following page is displayed:

Create a new system variable. The variable name is ant_home and the variable value is D: \ soft \ ant. The variable value points to the decompress directory of your local ant. Do not copy the variable value directly.

Modify the variable "path" and add "% ant_home % \ bin" at the end;

4) Test Run ant

On the CMD page, enter "ant". If the following content appears, the configuration is successful!

3. Ant edition Hello world!

Create an ant-demo directory on drive D.
Create a build. xml file in this directory. The Code is as follows:

1. <? XML version = "1.0"?>
2. <Project name = "refund" default = "build">
3. <Target name = "build">
4. <Echo> Hello world! </Echo>
5. <Concat destfile = "a_ B .js">
6. <Path = "A. js"/>
7. <Path = "B. js"/>
8. </Concat>
9. </Target>
10. </Project>

Prepare two JS files for merging, such as A. js and B. js. (add some JS Code to the two files ).
Go to the CMD interface and click ant. Note that you must first point the directory to the root directory of build. xml.

You will successfully output the_ B .js file. The directory structure is as follows;

What does the Code in build. xml mean? Don't worry. In the next tutorial, minghe will explain the ant build file.