Gruntfile의 구조와 사용법

Gruntjs를 사용한다고 하는것은 gruntfile.js를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다.
개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs를 사용할 수 있을 정도로 어렵지 않습니다.

이전 포스팅에서 Gruntjs의 소개와 설치법을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다.

gruntfile.js의 구조와 사용법

gruntfile.js의 가장 기본적인 구조는 아래와 같습니다.
1. 프로젝트의 구성, 2. 사용한 플러그인 로딩, 3. 실행 명령어의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니다.

module.exports = function(grunt) {

  // 1. 프로젝트의 구성
  grunt.initConfig({

    // package.json의 정보를 불러옴
    pkg: grunt.file.readJSON('package.json'),

    // uglify 플러그인(패키지)의 옵션을 정의 함
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }

  });

  // 2. 사용한 플러그인 로딩(먼저 npm으로 설치를 해야 함) 
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 3. 실행 명령어 (명령창에서 grunt 명령으로 실행됨)
  grunt.registerTask('default', ['uglify']);

};

gruntjs사이트에서 발췌

1. 프로젝트의 구성

프로젝트의 구성은 module.exports = function(grunt) { ... } 로 javascript의 Function형태로 작성하고 모듈을 exports하여 외부에서 실행시킬 수 있게 되어 있습니다.

module.exports = function(grunt) {

};

▲ 예) gruntfile.js의 모든 내용은 위의 모듈 내에 작성을 해야 합니다. 위의 모듈내에 작성된 내용은 node js의 명령어창(주로 window의 Dos창)에서 명령어로 실행을 시킬 수 있습니다.

Tastk 구성 정의

grunt.initConfig({ ... }) 안에 사용할 Task(플러그인)들을 명시하고 옵션을 지정합니다. Task(플러그인)들의 작성 순서는 상관없이 없으며 설치된 각 Task(플러그인)을 어떻게 사용할지에 대한 구성을 정의 합니다. 예를들면, 원본파일은 어느 폴더에 있는 파일을 참조할지, 처리는 어떻게 할지, 그리고 처리하고 난 결과물은 어디 폴더에 저장 할지 등등.. 설정을 각 Task별로 정의를 합니다.

grunt.initConfig({ 

    // uglify 플러그인(패키지)의 옵션을 정의 함
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js', // 소스폴더 위치
        dest: 'build/<%= pkg.name %>.min.js' // 결과를 저장할 폴더와 파일명
      }
    }

 })

▲ 여기서는 샘플로 uglify라는 Task(플러그인) 하나만 정의 했지만 실제로는 많은 플러그인들을 나열하여 정의합니다.

uglify 플러그인에 대해서 간단히 설명을 하면....

uglify는 javascript를 압축해 주는 플러그인입니다. 압축이라 함은 javascript 코드에서 빈공간과 줄바꿈, 주석 등.. 불필요한 모든 요소들을 제거해 줍니다. 그래서 결과 파일을 봤을 때는 소스코드가 그냥 한줄로 아주 길게 늘어져있는 코드만 보여 집니다.

uglify의 build를 실행시키면 src에 지정된 url에 있는 javascript파일 들에 대해서 모두 uglify처리를 합니다. 그리고 dest에 지정된 url에 결과 파일을 저장합니다. 보통은 같은 폴더 안에 .min을 붙혀서 저장하는 경우가 일반적입니다.

2. 사용한 플러그인 로딩

grunt.initConfig({ ... })에 지정한 플러그인들을 사용하기 위해서는 먼저 아래와 같이 플러그인을 불러와야 합니다. 사용한 모든 플러그인을 로딩 해야 합니다.
샘플에는 uglify만 사용했기 떄문에 grunt.loadNpmTasks('grunt-contrib-uglify');만 로드하면 되지만 그냥 샘플로 아래에 몇 개를 더 추가해 봤습니다. 이런식으로 사용한 플러그인들은 아래쪽으로 작성하여 로딩을 시켜줘야 합니다.

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin'); // 이미지를 옵션에 따라 압축함
  grunt.loadNpmTasks('grunt-contrib-coffee'); // coffee 스크립트로 작성된 소스를 javascript로 변화시켜줌
  ...

참고로 플러그인 명이 contrib가 들어가 있는 것은 Grunt Team에서 제작한 것이므로 공신력이 있다고 보시면 됩니다.

3. 실행 명령어

플러그인을 정의 했고, 로딩을 했으면 마지막으로 플러그인들을 순서대로 실행시켜는 명령어 뭉치를 작성하애 합니다.
grunt.registerTask('default', ['']); 라는 명령어 뭉치로 작성을 한 후 명령어 창에 grunt 명령어를 실행시키면 지정된 순서대로 실행이 됩니다. 상황에 따라 여러개의 명령어 뭉치를 작성해놓고 골라서 실행시켜도 됩니다.

  grunt.registerTask('serve', [
    'uglify',
    'imagemin',
    'coffee'
  ]);
  ...

▲ 명령어 창에 grunt serve라는 명령어를 입력했을 때, 먼저 uglify가 실행되고 두번쨰로 imagemin가 실행되고 세번쨰로 coffee가 자동으로 실행됩니다.

  grunt.registerTask('build', [
    'coffee'
    'uglify',
    'imagemin',
  ]);
  ...

▲ 명령어 창에 grunt build라는 명령어를 입력했을 때, 먼저 coffee가 실행되고 두번쨰로 uglify가 실행되고 세번쨰로 imagemin가 자동으로 실행됩니다.

  grunt.registerTask('default', [
    'imagemin',
    'coffee'
    'uglify',
  ]);
  ...

▲ 명령어 창에 grunt라는 기본 명령어를 입력했을 때, 먼저 imagemin가 실행되고 두번쨰로 coffee가 실행되고 세번쨰로 uglify가 자동으로 실행됩니다.

다음 포스팅에는 Gruntfile.js의 주요 플러그인에 대해서 소개하도록 하겠습니다.