3부 Grunt js task 그런트 자바스크립트 작업
- 퍼블리셔/Grunt
- 2014. 12. 26. 17:41
3부 Grunt js task 그런트 자바스크립트 작업
javascript task
자바스크립트는 일반적으로 jshint
, concat
, uglify
등
3개의 모듈을 사용합니다.
각각에 대한 모듈을 간단이 살펴봅니다.
jshint 모듈
jshint 저장소 - https://github.com/gruntjs/grunt-contrib-jshint
jshint 는 자바스크립트의 오류를 잡아주는 모듈입니다.
오류가 하나라도 있으면 통과가 되지 않습니다. 즉 빌드가 되지 않습니다.
jshint 의 옵션은 상당이 많습니다. 옵션만 보더라도 많은양의 글을 봐야합니다.
규칙을 번역해놓은 좋은글을 링크합니다. JSHint의 옵션 정리 - http://blog.outsider.ne.kr/1007
Gruntfile.js 에 적힌 설정을 보면 jshint의 옵션은.jshintrc
을 사용하고,
리포트로 jshint-stylish
모듈을 사용하라는 의미입니다.
jshint-stylish
를 사용안해도 무방합니다.
Gruntfile.js
와 common.js
를 옵션에 따라 검사하라는 의미입니다.
jshint: {
options: {
jshintrc: '<%= config.custom %>/.jshintrc',
reporter: require('jshint-stylish')
},
grunt: {
src: ['Gruntfile.js']
},
docs: {
src: '<%= config.app %>/js/common.js'
}
}
concat 모듈
concat 모듈은 여러파일을 하나의 파일로 합쳐주는 모둘이다.
여기서는 자바스크립트만 합치지만 css 나 다른파일들도 합칠수 있다.
concat 저장소 - https://github.com/gruntjs/grunt-contrib-concat
사용된 옵션을 보면 분리자로 ;
를 사용하며, 소스경로의 common.js
를
목적지의 common.js
로 만들어라라는 의미입니다.
concat: {
docs: {
options: {
separator: ';'
},
src: [
'<%= config.app %>/js/common.js'
],
dest: '<%= config.dist %>/js/common.js'
}
},
참고로 여기서는 Gruntfile.js 에 있는 주석을 제거하고 설명했습니다.
uglify 모듈
uglify 모듈은 공백을 없애고, 변수명을 짧게하는 등 압축하는 모듈입니다.
uglify 저장소 - https://www.npmjs.com/package/grunt-contrib-uglify
옵션을 보면 코멘트를 없애고, 소스맵을 만들고, 배너를 만들라는 의미입니다.
<%= concat.docs.dest %>
는 앞전 태스크 concat 에서 만들 파일을 사용하라는 의미입니다.
uglify: {
options: {
preserveComments: 'some', // 코멘트 없음
sourceMap: true,
banner: '<%= banner %>'
},
docs: {
src: '<%= concat.docs.dest %>',
dest: '<%= config.dist %>/js/common.min.js'
},
}
이로써 자바스크립트에 대한 모듈은 대략 살펴보았으며 일반적으로 이 세가지 모듈을 사용합니다.
마찬가지로 그런트 작업환경구성하기
의 Gruntfile.js
에 모든 설정은
모두 입력되어져 있습니다.