ant入门指南—web前端开发七武器(1)
武器档案
- 名称:apache ant
- 最新版本:1.8.2
- 用途:文件构建工具
- 下载:http://labs.renren.com/apache-mirror//ant/binaries/apache-ant-1.8.2-bin.zip
- ant使用文档:http://ant.apache.org/manual/index.html
- 必备指数:
- 使用难度:
ant作为目前中国最受欢迎的开源构建工具,广泛应用于java工程构建。也许你会感到很疑惑,js作为动态语言,并不需要编译过程,为什么需要ant这样的构建工具呢?ant能够帮助前端工程师解决那些问题呢?采用ant构建js和css的优点和缺点是什么呢?如何使用ant呢?这些问题在这个系列教程中明河将一一解答。
1.为什么前端工程师需要ant?
来看个经典的应用场景:
在你的页面中需要引用不少的jquery插件,比如plug-1.js、plug-2.js、plug-3.js…yslow关于前端性能优化的第一建议就是页面应该保持尽量少的js和css引用。明显这个场景违背了这个建议,所以我们需要合并这些js插件,合并成plug-combine.js文件,传统的做法是人肉合并,以前明河也是这么干的,但遇到了如下烦恼,plug-1.js是自己写的插件,经常要更新这个文件的代码,每次更新完都要重新人肉更新下plug-combine.js,作为一个懒人,明河在想,“有没有一个工具可以帮我自动合并文件呢?当然合并后能够自动调用压缩工具压缩文件就更棒了!”。ant这个神奇的小工具就是用来帮前端偷这样的懒的!
ant能帮前端干些什么呢?
- 合并js/css文件;
- 调用YUI Compressor自动压缩css文件,调用Google Closure Compiler自动压缩js;
- 快速批量复制/删除指定文件;
- 调用jsDoc工具,自动生成js文档;
- 连接FTP,将代码快速发布到指定服务器;
- 将文件自动上传到svn上;
- 自动打包成zip文件
- …
ant提供了一整套的任务列表帮你从重复耗时的构建流程中解脱出来!看到ant这只神奇的蚂蚁能做如此多的事,心动了吗?那么跟着明河来学学如何使用ant。
明河要强调的一点是ant很简单,只要你有足够的耐心,你一个在1天内掌握其使用方法。
2.安装ant
1)下载ant(好吧,这是废话-_-!)
你下载下来的ant,应该包含如下文件:
2)安装java运行环境
ant是java程序,所以依赖于java运行环境,如果你的机子已经安装JDK,那么请跳过这一步,如果没有请先下载JDK,传送门在此。
(PS:请运行“CMD”,然后键入“javac”,如果出现如下界面说明java环境OK。)
如果出现“’javac’ 不是内部或外部命令,也不是可运行的程序或批处理文件。”,那么请设置下java环境变量。
设置方法参见,明河之前写的《YUI Compressor快速使用指南—web前端开发七武器》,这里不再累述。
3)配置环境变量
右击“计算机”,点击“系统设置”,出现如下界面:
新建系统变量,变量名:ANT_HOME,变量值:d:\soft\ant,变量值指向你本机ant的解压目录,请勿直接copy这个变量值。
修改变量:path,在最后添加:%ANT_HOME%\bin;
4)试运行ant
在”CMD”界面,输入“ant”,如果出现以下内容,说明配置成功!
3.ant版的hello world!
在d盘新建个ant-demo的目录。
在该目录下新建个build.xml,代码如下:
- <?xml version="1.0"?>
- <project name="refund" default="build">
- <target name="build">
- <echo>Hello world!</echo>
- <concat destfile="a_b.js">
- <path path="a.js"/>
- <path path="b.js"/>
- </concat>
- </target>
- </project>
再准备二个用于合并的js文件,比如a.js和b.js,(随便在二个文件中加些js代码)。
进入cmd界面,敲入ant,留意必须先将目录指向build.xml的根目录。
你将成功输出a_b.js文件,目录结构如下;
build.xml中的代码是什么意思呢?别急,下一篇教程明河将讲解ant的build文件。
ant入门指南—web前端开发七武器(1)相关推荐
- YUI Compressor快速使用指南—web前端开发七武器
YUI Compressor快速使用指南-web前端开发七武器 2012-12-20 15:05:17| 分类: 持续集成 |字号 订阅 转自: RIA之家 武器档案 名称:YUI Compress ...
- web前端开发七武器
http://blog.sina.com.cn/s/blog_40e5679c010119pf.html 武器一:前端开发IDE 最佳前端开发IDE:IntelliJ IDEA 推荐指数: 凭什么 ...
- web前端开发七武器—ant入门指南(1)
武器档案 名称:apache ant 最新版本:1.8.2 用途:文件构建工具 下载:labs.renren.com/apache-mirror//ant/binaries/apache-ant-1. ...
- web前端开发七武器—Jasmine入门教程(上)
武器档案 名称:Jasmine 用途:javascript单元测试框架 下载:http://pivotal.github.com/jasmine/downloads/jasmine-standalon ...
- 零基础学习WEB前端开发(七):注释及特殊字符
一.注释的使用 注释,就是添加一些"废话",为了便于理解和阅读,但是并不在正式内容中显示或执行 语法:<!-- 注释的内容 --> <!--这是一段注释.注 ...
- 自学Web前端开发学习讲解 – 入门篇
很多人都对web前端感兴趣,这一期主要聊关于如何入门学习Web前端开发的过程分享,此篇适合想入门初学者,大佬就不用看了.主要内容是以本人这一路自学web前端的一些经验和建议,学习哪些知识,以及如何正确 ...
- 怎样入门web前端开发?
Web前端开发怎么入门? Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下. ...
- 做Web前端开发的你必须会这几点!
1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...
- 最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版
课程介绍 下载地址:百度网盘 一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发 对于想从事Web前端学习和开发工作的朋友来 ...
最新文章
- 服务器安装系统时无法创建新的分区,重装系统出现“我们无法创建新的分区,也找不到现有的分区”...
- 现金流为王!中小企业如何“疫”境求生?
- 机器学习(十二)——机器学习中的矩阵方法(2)特征值和奇异值
- 【MyBatis】MyBatis初体验
- nlp算法文本向量化_NLP中的标记化算法概述
- 深入.NET平台和C#编程笔记 第七章 深入理解多态
- 华为机试HJ77:火车进站
- chrome vue.js插件文档_前端开发者必备的40个VSCode插件!
- vue2.0环境搭建
- window wlan 相关服务
- 详解 Spring 3.0 基于 Annotation 的依赖注入实现(转)
- c语言内存四区,详解C语言中的内存四区模型及结构体对内存的使用
- VB开发OCX控件的属性之自定义列表项
- python命令输入if_SPSS中Recode、Compute、Count、If命令
- 测试用例是开发人员最后一块遮羞布
- 新疆高一计算机学业水平测试,2017年新疆高中学业水平考试科目
- 重启服务器上的MYSQL
- css word-wrap
- 《途客圈创业记:不疯魔,不成活》一一2.2 种子融资
- /var/lib/docker/overlay2 占用很大,docker数据目录迁移