JS 파일 생성 폴더

XML 화면 파일은 JS 파일로 변환되어 /WebContent/_wpack_/ 폴더 아래에 저장됩니다. 화면 파일 개발에 사용한 공통 리소스도 JS 파일로 변환되어 /WebContent/_wpack_/cm/ 폴더 아래에 저장됩니다.

W-Pack 폴더

스튜디오에서 변환하기

Project – Build Automatically 옵션을 설정하면 XML로 생성되는 화면 파일을 JS로 자동 변환할 수 있습니다.

Project – Build Automatically

웹스퀘어 프로젝트를 다시 JS 파일로 빌드하려면 Project – Rebuild WebSquare Project 메뉴를 사용하십시오.

Project – Rebuild WebSquare Project

W-Pack의 로그는 Console 탭에서 확인할 수 있습니다.

Console 탭

Stand-alone 모듈 사용하기

W-Pack은 CI 서버 연동 및 서버에서의 일괄 변환을 지원하기 위해 Stand-alone 모듈을 지원합니다. W-Pack Stand-alone 모듈은 스튜디오 내장된 W-Pack과 동일하게 동작하며 Mac, Linux, Window (32bit, 64bit)운영 체제를 지원합니다.

W-Pack Stand-alone 모듈은 아래 순서로 실행하십시오.

cmd 나 terminal과 같은 CLI 도구에서 W-pack을 실행합니다.

$r_title(Windows에서 실행 (cmd를 실행 후 모듈이 있는 위치로 이동))
filename.exe --src path --dest path --baseDir path(...생략)

$r_title(Mac 혹은 Linux에서 실행 (terminal을 실행 후 모듈이 있는 위치로 이동))
filename --src path --dest path --baseDir path(...생략)

활성화된 명령창에 아래를 참조하여 명령어를 작성합니다.

명령어 종류
명령어	인자	필수 여부	기본 값	설명
`--baseDir` `-b`	절대 경로	O	없음	프로젝트 폴더 까지의 디렉토리 경로. posix, Windows 방식 모두 지원.
`--src` `-s`	절대 경로	O	없음	빌드할 XML 파일의 디렉토리 혹은 파일 경로. posix, Windows 방식 모두 지원.
`--dest` `-d`	절대 경로	O	없음	빌드 후 파일이 생성될 디렉토리 혹은 파일 경로. posix, Windows 방식 모두 지원.
`--js` `-j`	0~2	(선택)	1	0 : JS 코드 minify하지 않음. 1 : JS 코드 주석과 공백을 제거. 2 : JS 코드 주석과 공백을 제거하고, 로컬 변수를 치환.
`--css` `-c`	0~1	(선택)	1	0 : CSS 코드를 minify 하지 않음. 1 : CSS 코드의 주석과 공백을 제거하고, RGB → Hex 변환 수행.
`--ignore` `-i`	절대 경로	(선택)	없음	빌드 시 제외할 디렉토리 경로. posix, Windows 방식 모두 지원.
`--noDebug` `-nd`	`true`, `false`	(선택)	`true`	`true` : `debugger` 코드 제거. `false` : `debugger` 코드 제거하지 않음.

디렉토리를 빌드할 경우

다음은C:\Program Files\project\ 웹스퀘어 프로젝트 경로 전체를 JS로 빌드하는 경우의 예시입니다.

$r_title(example.sh)
... 중략 ...
--baseDir C:\Program Files\project\ --src C:\Program Files\project\ --dest C:\Program Files\project\_wpack_\ --js 1 --css 1 --ignore C:\Program Files\project\engine\ --noDebug false
... 중략 ...

위의 예제에 따른 JS 변환 설정은 아래와 같습니다.

JS 변환 설정
절대 경로 `--baseDir`	C:\Program Files\project\
변환 대상 `--src`	C:\Program Files\project\ 하위에 있는 모든 웹스퀘어 XML 파일
빌드된 파일들을 생성할 위치 `--dest`	C:\Program Files\project\_wpack_\
Minify 조건 `--js 1 --css 1`	JS : 1 레벨로 Minify 수행. CSS: 1 레벨로 Minify 수행.
제외 대상 `--ignore`	project 폴더 하위의 engine 폴더를 변환 대상에서 제외.
`debugger` 코드 제거 여부 `--noDebug false`	Minify 작업 중에 `debugger` 코드는 삭제하지 않음.

여러 파일을 빌드할 경우

다음은 파일 여러 개를 JS로 빌드하는 경우의 예시입니다.

$r_title(example1.sh)
... 중략 ...
-b C:\Program Files\project\ -s C:\Program Files\project\index.xml,c:\Program Files\project\sub.xml -d C:\Program Files\project\_wpack_\,C:\program Files\project\_wpack_\ -j 2
... 중략 ...

위의 예제에 따른 JS 변환 설정은 아래와 같습니다.

JS 변환 설정
절대 경로 `-b`	C:\Program Files\project\
변환 대상 `-s`	C:\Program Files\project\ 하위의 index.xml 및 sub.xml 파일만 변환.
빌드된 파일들을 생성할 위치 `-d`	C:\Program Files\project\_wpack_\
Minify 조건 `-j 2`	CSS는 명령어를 입력하지 않았으므로 설정 기본값인 1레벨로 Minify 수행. JS는 2레벨로 Minify 수행.
제외 대상	`ignore` 명령어를 입력하지 않았으므로 제외할 대상은 없음.
`debugger` 코드 제거 여부	`noDebug` 명령어를 입력하지 않았으므로 설정 기본값인 `true`를 적용하여 `debugger` 코드를 제거.

제약 사항

(1) 타겟이 다중 파일인 경우, (a) 파일 단위 경로는 공백 없는 ,(콤마)로 구분하고 (b) src 및 dest의 인자는 반드시 파일 단위 경로를 모두 입력.

(2) baseDir, src, ignore 경로가 실재 존재하지 않을 경우, 비정상적 수행을 막기 위해 동작이 중단됨.

(3) 명령어와 인자는 반드시 하나의 공백으로 구분하여 입력.

Jenkins Job 실행 시 작성 한 example.sh 파일을 Execute shell 해당 경로를 작성하는 예제