개요

• task 를 지정해서 커맨드라인을 통해서 동작하는 자바스크립트 빌드용 툴이다. 
• 여러가지 플러그인을 통해서 css, js 등의 유효성 검증 및 압축, 난독화등을 할 수 있다.

설치

• bower 와 마찬가지로 npm 을 기반으로 설치되기 때문에 일단 node.js 를 설치해서 npm을 설치 시킨다. 

grunt-cli 설치하기

$ npm install -g grunt-cl

grunt 설치

$ npm install -g grunt-cl

사용하기

package.json 파일 생성하기

 – 다음의 명령으로 실행하는데 별도의 입력할 것이 없다면, 계속 enter를 쳐서 넘어가도 된다. 

$ npm init

Gruntfile.js 파일 생성

 – 프로젝트와 동일한 위치에 생성한다. 실질적인 grunt 명령어를 위해서 어떤 작업을 수행할 것인지를 지시하는 파일 

 – 대소문자 주의 할것. 

 – registerTask 부분에서 dev 라고 하는 task 명과 작업할 리스트를 적는데, 위의 경우 적지 않았음. 

실행하기

$ npm install -g grunt-cl

플러그인 설치하기

– 다양한 플러그인을 통해서 여러가지 기능을 제공함. 

– 여기에서는 js를 검증하고, 합쳐주고, 난독화 하는 부분에 대해서 설치하고, Gruntfile.js 에 명시하는 부분까지 설명한다. 

grunt-contrib-concat

– 말 그대로 파일을 합쳐주는 플러그인 

$ npm install -g grunt-cl

– 위와 같이 설정하면 되는데, 설치한 플러그인을 로드하는 부분을 loadNpmTasks()함수를 통해서 지정하고, .initConfig 에서 플러그인에 대한 설정을 명시한다. 

– 그리고 마지막으로 해당 작업을 registerTask를 통해서 등록하면 된다. 

– 주의할점이 src, dest의 위치를 지정해 줘야 하는데 src 에서 static/js 하위에 여러 디렉토리가 있고 그 하위에 js가 있다면 /**/ 으로 써주면 알아서 찾는다. 

옵션 

Optiosseparator

• 파일이 통합되는 지점에 들어갈 string 설정

banner

• 파일이 통합된 output 파일 최상단의 banner string을 설정

footer

• ‘banner’와 같은 방식으로, 통합된 파일의 최하단에 위치하는 string을 설정

stripBanners

• 각각의 파일에 쓰여있는 JavaScript banner comments를 제거

       · false – 제거하지 않는다.(default)

       · true – /* … / 은 제거되지만, /! … */은 제거되지 않는다.

       · options

• block : true 인 경우, 모든 block comments 제거

• line : true 인 경우, 모든 // 라인 제거

grunt-contrib-jshint

– JSHint를 통한 file validation 

force

     · true – error 검출 시 task를  fail시키지 않고 계속 진단

reporter

     · output을 modifying할 수 있는 옵션 (jshint-stylish 설치 :  $npm install jshint-stylish –save-dev)

*grunt-contrib-uglify

– UglifyJS를 통한 file minfying

옵션

다양한 플러스인을 한번에 쓰는 경우

• 주의할점중 하나는 registerTask() 함수를 통해서 등록할때, 작업의 명시 순서에 따라 호출이 된다. 

• 예를 들어, 위에서 dist의 경우 jshint, concat, uglify 순으로 호출되어 진다.