티스토리 뷰

Grunt란?

GruntJavaScript 작업 자동화 도구이다. Java 진영의 Maven, Gradle과 같은 프로젝트 빌드 도구라고 생각하면 이해하기 쉽다. 최근 프론트엔드 영역의 개발 복잡성이 증가하면서 JavaScript 또한 빌드의 대상이 되고 있다. 이번 글에서는 Grunt를 이용하여 복수개의 JavaScript 소스 코드를 병합(Concat), 축약(Uglify)하는 방법을 소개하고자 한다.

Grunt 사용을 위한 준비사항

Grunt를 사용하려면 프로젝트 루트 디렉토리에 package.json, Gruntfile.js가 작성되어 있어야 한다. Java 진영의 Gradlebuild.gradle의 관계를 생각하면 이해하기 쉽다.

콘솔에서 grunt 명령어를 사용하려면 NPM을 이용한 설치가 필요하다.

$ npm install -g grunt-cli

이제 프로젝트 루트에서 package.json을 작성한다.

{
  "name": "sample-app",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "1.0.1",
    "grunt-contrib-concat": "1.0.1",
    "grunt-contrib-uglify": "2.0.0"
  }
}
  • 기본 종속성으로 grunt를 추가한다. 또한, 이번 글에서 소개할 grunt-contrib-concat, grunt-contrib-uglify를 추가한다.

NPM으로 앞서 정의한 package.json대로 해당 모듈들을 설치한다. 작업이 완료되면 프로젝트 루트 디렉토리에 node_modules 디렉토리가 생성된다.

npm install

Gruntfile.js 작성

마지막 관문이다. 프로젝트 루트 디렉토리에 Gruntfile.js을 아래와 같이 자동화할 작업을 작성한다.

module.exports = function(grunt) {

  grunt.initConfig({
    concat: {
      build: {
        files: {
          'dist/app.js', ['src/main/javascript/app.js', 'src/main/javascript/app2.js']
        }
      }
    },
    uglify: {
      build: {
        files: {
          'dist/app.min.js': ['dist/app.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
}

Grunt 작업 실행

앞서 정의한 작업을 아래와 같이 실행한다. 첫번째는 소스 코드를 병합(Concat)하는 명령어이다.

$ grunt concat

두번째는 소스 코드를 축약(Uglify)하는 명령어이다.

$ grunt uglify

참고 글

댓글
댓글쓰기 폼