websquare min 사용 방법

rock1000 edited this page Nov 14, 2014 · 2 revisions

node.js 및 npm(Node Package Manager) 설치

grunt 설치

npm install -g grunt-cli

프로젝트 다운로드 및 압축 해제

종속적인 모듈 설치

  • (압축 해제한) 작업 디렉토리로 이동하여 아래 명령을 실행한다.
npm install

websquare-min 설치 확인

  • 다음 명령을 통해 설치가 정상적으로 되었는지 확인한다.
grunt test
Running "clean:tests" (clean) task
Cleaning "tmp"...OK

Running "websquaremin:compile" (websquaremin) task
Minified 1 xml

실제 작업

  • ./src 에 minify 대상 파일 복사

grunt 실행

grunt traverse

결과물 확인

  • ./dest 에서 결과물을 확인하다.

compress 와 mangle

  • 기존 0.4.1 버전 하위에서는 js 를 minify 할 경우 uglify 만 수행하였으나 0.4.2 버전 부터는 기본으로 compress 와 mangle 을 수행한다.
  • compress 는 다양한 optimization 을 통해 코드 사이즈를 줄이는 작업이다.(http://lisperator.net/uglifyjs/compress)
  • mangle 은 로컬 변수와 함수명을 줄이는 작업이다.(http://lisperator.net/uglifyjs/mangle)
  • 아래는 2개의 컴포넌트 이벤트 핸들러 부분을 떼어내어 보여주고 있다.
// 원본
treeview3.checkByValue( '010102' , true , true );
treeview3.checkByValue( '010202' , true , true );

var returnValue = treeview3.getCheckedValues();
output4.setValue( returnValue );
  • 예를 들어 traverse task 를 실행할 경우, compress 와 mangle 을 모두 수행한다.
// uglify & compress & mangle
treeview3.checkByValue("010102",!0,!0),treeview3.checkByValue("010202",!0,!0);

var e=treeview3.getCheckedValues();output4.setValue(e)
  • compress 만 수행한 결과이다.
  • task > options target > js 속성 > mangle 에 falseBoolean 값을 지정하면 수행을 중지시킬 수 있다.
  • compress 도 false 값을 지정하여 중지시킬 수 있다.
  • compress 와 mangle 모두 false로 한 경우 0.4.1 버전 이하와 동일한 결과를 얻을 수 있다.
options: {
    js: {
        mangle: false
    }
}
// uglify & compress
treeview3.checkByValue("010102",!0,!0),treeview3.checkByValue("010202",!0,!0);

var returnValue=treeview3.getCheckedValues();output4.setValue(returnValue)
  • compress(http://lisperator.net/uglifyjs/compress) 와 mangle(http://lisperator.net/uglifyjs/mangle) 에 상세 옵션을 줄 수 있다.
  • compress 옵션 중 side_effects 는 WebSquare 특성 상 false 로 고정됩니다.
  • 아래는 boolean expressions 을 optimize 하지 않고, mangle 에서 변수명 중 returnValue 는 제외한 경우이다.
  • compress 와 mangle 의 값으로 Boolean 과 Object 를 지정할 수 있는데 false 가 아닌 경우 모두 정상 동작한다.
options: {
    js: {
        compress: {
            booleans: false
        },
        mangle: {
            except: ['returnValue']
        }
    }
}
// uglify & compress & mangle
treeview3.checkByValue("010102",true,true),treeview3.checkByValue("010202",true,true);

var returnValue=treeview3.getCheckedValues();output4.setValue(returnValue)

Filtering

  • minify source 디렉토리가 아래와 같은 경우 예입니다.
$ ls -alR ./src
total 0
drwxr-xr-x   4 maninzoo  staff  136 11 12 16:13 .
drwxr-xr-x  16 maninzoo  staff  544 11 12 17:46 ..
drwxr-xr-x   3 maninzoo  staff  102 11 11 05:21 a
drwxr-xr-x   7 maninzoo  staff  238 11 11 14:53 subdir

./src/a:
total 64
drwxr-xr-x  3 maninzoo  staff    102 11 11 05:21 .
drwxr-xr-x  4 maninzoo  staff    136 11 12 16:13 ..
-rw-r--r--  1 maninzoo  staff  30549 10  3 15:43 treeview_basic_1.xml

./src/subdir:
total 416
drwxr-xr-x  7 maninzoo  staff     238 11 11 14:53 .
drwxr-xr-x  4 maninzoo  staff     136 11 12 16:13 ..
-rw-r--r--  1 maninzoo  staff      12 11 11 14:24 06.js
-rw-r--r--  1 maninzoo  staff   23288 11 11 14:54 06.xml
-rw-r--r--  1 maninzoo  staff  173381 11 11 14:41 CYCO0001.js
drwxr-xr-x  4 maninzoo  staff     136 11 11 05:29 b
-rw-r--r--  1 maninzoo  staff    5397  9  2 11:08 edu.css

./src/subdir/b:
total 80
drwxr-xr-x  4 maninzoo  staff    136 11 11 05:29 .
drwxr-xr-x  7 maninzoo  staff    238 11 11 14:53 ..
-rw-r--r--  1 maninzoo  staff   6172  9  4 21:23 sample.xml
-rw-r--r--  1 maninzoo  staff  29154  9  6 01:44 zensys.xml
  • 필터에 전달되는 파라미터
src/
src/a
src/a/treeview_basic_1.xml
src/subdir
src/subdir/06.js
src/subdir/06.xml
src/subdir/CYCO0001.js
src/subdir/b
src/subdir/b/sample.xml
src/subdir/b/zensys.xml
src/subdir/edu.css
  • 필터링을 하지 않은 경우
traverse: {
    files: [
        {expand: true, cwd: 'src/', src: ['**'], dest: 'dest/'}
    ]
}

grunt.registerTask('traverse', ['clean:traverse', 'websquaremin:traverse']);
$ grunt traverse
Running "clean:traverse" (clean) task
Cleaning "dest"...OK

Running "websquaremin:traverse" (websquaremin) task
Created 4 directories, minified 4 xml, minified 2 js, minified 1 css

Done, without errors.
  • subdir 디렉토리를 제외할 경우
traverse_reg: {
    options: {
        filter: /\S*subdir\S*/
    },
    files: [
        {expand: true, cwd: 'src/', src: ['**'], dest: 'dest/'}
    ]
}

grunt.registerTask('traverse_filter01', ['clean:traverse', 'websquaremin:traverse_reg']);
$ grunt traverse_filter01
Running "clean:traverse" (clean) task
Cleaning "dest"...OK

Running "websquaremin:traverse_reg" (websquaremin) task
Created 2 directories, minified 1 xml

Done, without errors.
  • XML 파일을 제외할 경우
traverse_func: {
    options: {
        filter: function ( source ) {
                    return source.indexOf('.xml') <= 0;
                }
    },
    files: [
        {expand: true, cwd: 'src/', src: ['**'], dest: 'dest/'}
    ]
}

grunt.registerTask('traverse_filter02', ['clean:traverse', 'websquaremin:traverse_func']);
$ grunt traverse_filter02
Running "clean:traverse" (clean) task
Cleaning "dest"...OK

Running "websquaremin:traverse_func" (websquaremin) task
Created 4 directories, minified 2 js, minified 1 css

Done, without errors.

UPDATE

  • 모듈의 상위 버전을 내려받기 위해서 update 명령을 이용한다.
  • 프로젝트 Root 디렉토리(npm install 명령을 실행한 폴더)에서 아래 명령을 실행한다.
npm update