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.jscommon.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 에 모든 설정은 모두 입력되어져 있습니다.