JavaScript 구성 요소 여행(3):Ant 로 구성 요소 구축

듣 기 에 매우 쾌적 하지 않 습 니까?Let's go! 출발 합 시다~
이번 호 에 저 희 는 Ant 을 사용 하여 지난 번 에 작성 하고 정리 한 코드 파일 을 지정 한 선후 순서에 따라 단일 한 소스 파일 로 합 친 다음 에 이 파일 을 압축 할 것 입 니 다.자 바스 크 립 트 프로젝트 를 구축 하 는 기본 절차 입 니 다.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 의 구 조 를 대충 알 아 보 는 것 을 권장 합 니 다.

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

자세히 살 펴 보면 name, description 이라는 이름 들 을 제외 하고 다른 볼 수 있 는 규칙 은 다음 과 같다.

project 요소 의 default 속성 치 는 특정한 target 요소 의 name 속성 에 대응 합 니 다.

target 요소 의 depends 속성 치 는 기타 일부 target 요소 의 name 속성 에 대응 합 니 다.

${somename} 은 property 에서 정 의 된 값 을 참조 할 수 있 습 니 다.

다음은 우리 자신의 build.xml 을 쓰기 시작 합 니 다.
우선,설정 항목 의 기본 정보 와 관련 디 렉 터 리 이름,사용 할 인 코딩 등:

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

이 어 초기 화 에 사용 할 target 을 정의 합 니 다.build 하위 디 렉 터 리 를 만 드 는 것 을 책임 집 니 다:

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

그리고 concat 이라는 target 을 정의 하여 src 에 있 는 3 개의 자 바스 크 립 트 파일 을 선착순 으로 연결 합 니 다.실행 하려 면 앞에서 정 의 된 init:

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

을 먼저 실행 해 야 합 니 다.
이렇게 하면 일 할 수 있 는 JavaScript 파일 을 얻 을 수 있 습 니 다.아래 의 target 은 이 파일 을 압축 하 는 것 을 책임 집 니 다.분명히 concat 에 의존 하고 init 에 의존 하지만 init 에 대한 의존 도 를 명시 적 으로 지정 할 필요 가 없습니다.Ant 는 이러한 의존 관 계 를 처리 할 수 있 습 니 다.YUI Compressor 를 호출 하고 적당 한 인 자 를 입력 합 니 다:

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

큰 성 과 를 거 두 었 으 니 compress 처리 후의 서 류 는 생산 시스템 에 배치 할 수 있다.마지막 으로 우 리 는 청소 작업 을 해서 당신 이 파일 을 생 성 한 후에 최초의 상태 로 돌아 갈 수 있 도록 합 니 다:

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

기본 설정 을 다 썼 다 고 할 수 있 습 니 다.어떻게 사용 하나 요?구성 요소 루트 디 렉 터 리(또는 build.xml 이 있 는 디 렉 터 리)에 명령 행 으로 들 어간 다음:

에서 ant concat 을 실행 하면./build/smart-quue.source.js 를 얻 을 수 있 습 니 다.

에서 ant 을 실행 하고 <project> 에서 default 이 인용 한 target,즉 compress 을 선택 하여 얻 을 수 있 습 니 다./build 의 smart-quue.source.js 와 smart-quue.js

을 실행 하면 ant clean 을 삭제 합 니 다./build 디 렉 터 리 를 초기 상태 로 되 돌려 줍 니 다

이 전 제 는 JDK 와 Ant 가 올 바 르 게 설치 되 어 있 거나 설치 되 어 있다 는 것 입 니 다.잘못된 알림 이 있 으 면 준비 가 되 어 있 는 지 확인 해 야 할 수도 있 습 니 다.
가 는 길에 보 니 이번 호 에 소개 한 것 이 매우 간단 하 다 고 생각 하지 않 습 니까?당연 하 죠.구축 도 구 는 간단 하고 사용 하기 쉬 워 야 합 니 다.그렇지 않 으 면 많은 시간 을 그 위 에 쓰 는 것 이 가치 가 없 지 않 겠 습 니까?도구 의 가 치 는 생산력 을 향상 시 켜 더 많은 가 치 를 창 출하 는 데 있다.
마지막 으로,당신 은 여기,이곳 에서 Ant 의 도움말 문 서 를 볼 수 있 고,여기,이곳 에서 이번 호의 완전한 build.xml 파일 을 볼 수 있 습 니 다.