Home

Table of Contents JSTools 초간단 사용법 기본 문법 주요 옵션 파일 머지 및 압축 옵션 JSLint 실행 코드 복잡도 계산 파일 목록 지정 외부 설정 파일 지정 그 밖에 옵션 템플릿 문법 ANT 빌드 적용 예제 Taglib 적용 예제 자주 묻는 질문 (FAQ)

JSTools 초간단 사용법

1. JSTools는 JavaScript 파일 배포를 위한 지원 도구 입니다.
2. 압축과 난독화 모듈은 YUICompressor를 사용했습니다.
3. 버그가 있으면 신고해주세요~
4. 도스 커맨드 상에서 실행할때는 아래와 같이 java를 이용해 실행한다.

기본 문법

java -jar JSTools.jar <파일목록> [-옵션]

• <파일목록> : 필수 (단, -conf 옵션을 사용해 설정할 경우 명시적으로 쓴 파일이 -conf 설정보다 우선한다.)

1. 파일을 공백으로 나열한다. ex) file1 file2 file3
2. 폴더를 나열하면 폴더 하위에 모든 js 파일을 포함한다. ex) file1 dir1 dir2
3. 모든 경로는 상대경로를 지원한다. ex) ../dir1/file1 ./file2

주요 옵션

1. 모든 옵션은 마이너스(-)로 시작한다.
2. 모든 옵션을 한꺼번에 지정할수있다.

파일 머지 및 압축 옵션

-compress=[0,1,2,3,4]

• 0 일 경우, (기본값) 파일을 머지한다.
• 1 일 경우, 파일 머지 + 주석 제거
• 2 일 경우, 파일 머지 + 압축(YUI)
• 3 일 경우, 파일 머지 + 압축(YUI) + 난독화(obfuscate)
• 4 일 경우, 파일 머지 + 압축(YUI) + 난독화(obfuscate) + 불필요한 세미콜론제거
• 5 일 경우, UglifyJS로 압축한다. 압축율이 가장좋다.

ex) java -jar JSTools.jar file1 file2 dir1 output=./result.js ---> 옵션을 지정하지않아도 compress의 기본값은 0이다. ex) java -jar JSTools.jar file1 file2 dir1 -compress=1 ex) java -jar JSTools.jar file1 file2 dir1 -compress=2 ex) java -jar JSTools.jar file1 file2 dir1 -compress=3 ex) java -jar JSTools.jar file1 file2 dir1 -compress=4 ex) java -jar JSTools.jar file1 file2 dir1 -compress=5

JSLint 실행

-jslint[=옵션파일지정]

• 옵션파일을 지정해, jslint를 설정한다. 자세한 내용은 첨부된 jslint.conf 파일 참고
• 옵션을 지정하면 JSLint를 수행한다.

ex) java -jar JSTools.jar file1 file2 dir1 -jslint ex) java -jar JSTools.jar file1 file2 dir1 -jslint=./jslint.conf

코드 복잡도 계산

-jsmeter : 코드 정적분석(JSMeter)을 실행한다.

• 반드시 /jslint 폴더는 JSTools.jar 파일과 동일한 위치에 있어야한다.

 ex) java -jar JSTools.jar file1 file2 dir1 -jsmeter

파일 목록 지정

-list=xxxx

• 별도의 목록 파일을 지정한다. 샘플 목록 파일(mergelist.txt)를 참고한다.

 ex) java -jar JSTools.jar -list=./mergelist.txt

외부 설정 파일 지정

-conf=xxxx

• 별도의 설정 파일을 지정한다. 샘플 설정 파일(jstools.conf)을 참고한다.

그 밖에 옵션

 -output=xxxx
   출력할 파일을 지정한다. 지정하지 않으면 화면에 출력된다.
   도스 커멘드 상에서 실행할경우 파이프 라인(>)을 이용해도 된다.
   ex) java -jar JSTools.jar file1 file2 dir1 -output=result.js
   ex) java -jar JSTools.jar file1 file2 dir1 > result.js 
  	       
 -encoding=xxx
  입출력 파일 인코딩을 지정한다. 기본값은 UTF-8 이다. 만약 JS 소스코드가 EUC-KR로 인코딩 되었다면, 반드시 MS949로 지정해야한다. 
  	     
 -line-break=xxx
  압축 옵션 2,3번을 사용했을경우, 한줄로 압축되는 녀석들을 지정한 문자열 갯수에 따라 줄바꿈 해준다.
  ex) java -jar JSTools.jar file1 file2 dir1 -compress=2 -line-break=120
  	  
 -filetype=[js|css]
  머지할 파일 타입을 결정한다. 기본값은 js 지만, css 파일을 압축하고 싶다면 css로 지정한다.
  ex) java -jar JSTools.jar cssfile1 cssfile2 dir1 -compress=3 -fileType=css
 
 -infofile=xxx.[txt|json]
  압축 전후의 통계 정보를 파일로 출력한다. 확장자에 따라 출력 포맷이 달라진다.  
       
 -line-number
  출력 파일에 코드 라인 정보를 추가한다.  
             
 -tplComplie[=TemplateNameSpace]
  템플릿을 컴파일 한다.
             
 -keeplicense
  파일 압축시 라이센스 주석을 지우지 않고 유지한다. 단, 라이센스 주석은 /*** 으로 시작해야한다.
             

템플릿 문법

• 1 변수 치환

{%= 변수 %}

• 2 자바스크립트 문법 사용

{% 자바스크립트 표현식 %}

• 3 템플릿 ID 지정 (단, ID 사이에 공백 있으면 안됨)

\ {% for(var i=0; i<data.length; ++i){ var item = data[i]; %} {%if( item.header ) { %} <h2 class='tb-header{% if(i==0){ %} top{%}else{%} node{%}%}'>{%=item.header%}</h2> {%}%} <div class='tb-item{%if(item.isFirst){%} first{%}%}{%if(item.isLast){%} last{%}%} _tb_select({%=i%})'> {%=item.title%} {% if(item.hasChild) { %} <span class='tb-child'></span> {%}%} </div> {% } %}

• 5 템플릿을 컴파일해서 생성된 js 파일을 삽입한다.
• 6 아래와 같이 호출해 사용한다.

var sTpl = Template.get('sample_tpl_id', { data : [ {title:'제목1', header:'test', isFirst:true}, {title:'제목2', hasChild:true}, {title:'제목3' isLast:true}] }); wel.html(sTpl);

ANT 빌드 적용 예제

<target name="merge_js_files" description="merge js files from file list."> <echo>Merge Files...</echo> <exec executable="java"> <arg line="-jar" /> <arg path="${tools.dir}/JSTools.jar" /> <arg value="-conf=${source.dir}/jstools.conf"/> <arg value="-compress=2"/> <arg value="-output=${deploy.dir}/result.js"/> </exec> </target>

Taglib 적용 예제

1. JSP 파일 상단에 태그 라이브러리를 사용하기 위해 아래와 같이 기술한다.

  <%@ taglib uri="http://miconblog.com/jstools" prefix="jstools" %>

1. 같은 JSP 파일 안에 삽입할 스크립트 태그를 아래와 같이 작성한다.

  <jstools:merge mergedFile="/js/release/app.js" debug="N">
  /js/lib/collie.min.js
  /js/lib/FPSConsole.js
  /js/lib/AnimateJS.js
  /js/common/common.debug.js
  /js/app/Message.js
  /js/app/Configure.js
  /js/app/UI.Background.js
  /js/app/Object.Basket.js
  /js/app/Object.BallPool.js
  /js/app/Controller.js
  /js/app/Game.js
  </jstools:merge>
  - mergedFile 속성은 기술된 파일이 하나로 압축된 파일의 위치를 나타낸다. 
        압축된 해당 파일이 없다면, 기술된 파일을 하나씩 삽입한다.
  - debug 속성이 Y면, 기술된 파일을 하나씩 삽입한다.

1. 태그 라이브러리를 JSP에서 인식하는 방법

자주 묻는 질문 (FAQ)

1. Ant 실행시 이클립스 Console 창에서 한글이 깨질 경우

 antbuild.xml 파일에서 우클릭 > Run As > External Tools Configurations... 선택 
 JRE 탭 > Runtime JRE: > Run in the same JRE as workspace 으로 설정하면 제대로 나옵니다. 

1. 그냥 이클립스 Console 창에서 한글이 깨지는 경우

 Run Configuration > 작성중인 Application 선택 
 Common 탭 > Console Encoding > Other 에서  EUC-KR 선택 (없으면 직접 지정)