用Ant构建JavaScript组件

xo有瘾

xo有瘾

2016-02-20 00:53

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐用Ant构建JavaScript组件,赶紧看过来吧!

我们走到哪儿了?前两期思考了太多东西,你是否已有倦意?别担心,本期的话题很轻松,你只需要简单了解一些语法,写几行配置,就能驱使系统按你预设的方式自动完成一些工作。听起来是不是很惬意?Let’s go! 我们出发啦~

这期,我们会使用 Ant 将上期编写、整理的代码文件按指定的先后顺序合并成单一的源文件,然后压缩这个文件。这是构建 JavaScript 项目的基本步骤。Ant 是 Apache 的一个顶级开源项目,网上对它的介绍和安装,已经有很多文章,这里就不再赘述了。在构建之前,我们先来看看已有的文件布局:

  smart-queue  // 组件的根目录
    +--- src  // JavaScript源文件目录
        +--- lang.js  // 前文提到的外部文件
        +--- smart-queue.js  // Smart Queue 主文件

现在,我们要让它丰满起来:

组件根目录下添加:README: 介绍 Smart Queue 组件 LICENSE: 组件的授权信息 build.xml: Ant 使用的配置文件 组件根目录下添加 lib 子目录:存放构建过程中需要使用的外部程序和库文件lib 子目录下添加 yuicompressor.jar: 我们用 YUI Compressor 压缩 JavaScript 组件根目录下添加 test 子目录:存放测试组件所需的文件(下期介绍) src 目录下添加 intro.js: 介绍组件的版本及说明信息

麻雀虽小,五脏俱全。现在 Smart Queue 看上去像是比较专业的 JavaScript 项目了:

  smart-queue  // 组件的根目录
    +--- lib // JavaScript外部程序和库文件目录
        +--- yuicompressor.jar  // YUI Compressor
    +--- test // 测试文件目录
    +--- src // JavaScript源文件目录
        +--- intro.js  // 介绍和版本信息
        +--- lang.js  // 前文提到的外部文件
        +--- smart-queue.js  // Smart Queue 主文件
    +--- README // 组件自述文件
    +--- LICENSE // 组件授权信息

我们计划将构建出来的文件存放到组件根目录下的 build 子目录,还要通过构建工具创建并销毁它。首次尝试构建前,建议先大概了解一下 Ant 的配置文件build.xml 的结构:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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"/

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  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

 

仔细观察一下,除了 name, description 这些名字都很容易理解外,其他可以看到的规律包括:

project 元素的 default 属性值对应某个 target 元素的 name 属性; target 元素的 depends 属性值对应其他某些 target 元素的 name 属性; ${somename} 可以引用 property 中定义的值。

展开更多 50%)
分享

猜你喜欢

用Ant构建JavaScript组件

Web开发
用Ant构建JavaScript组件

自动化每日构建(二)用Ant来完成java工程的每日构建

编程语言 网络编程
自动化每日构建(二)用Ant来完成java工程的每日构建

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

java ant 配置及构建项目图文教程

编程语言 网络编程
java ant 配置及构建项目图文教程

Struts 框架之构建 Model组件

编程语言 网络编程
Struts 框架之构建 Model组件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Struts框架之构建Model组件

编程语言 网络编程
Struts框架之构建Model组件

在Eclipse中使用ANT灵活构建Web应用

编程语言 网络编程
在Eclipse中使用ANT灵活构建Web应用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javascript时间对象的练习

javascript时间对象的练习

Linux下如何查杀pscan2木马?

Linux下如何查杀pscan2木马?
下拉加载更多内容 ↓