grunt 간단 사용기
개요
- 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 순으로 호출되어 진다.