Grunt

자바스크립트의 유명한 빌드툴인 Grunt를 설치및 사용 해 보도록 한다.

1. 참고 URL
- http://gruntjs.com

2. 설치 시 상태
- OS : OSX 10.11
- 개발툴 : IntelliJ IDEA 14

IntelliJ 에서 NodeJS express 프로젝트를 생성한 상태에서 Grunt를 설치하고 적용 한다. 퇴근하고 쉬엄 쉬엄 만드는 개인적인 것이라 그냥 하려고 했지만, 추후 정리 작업이 너무 많아 질것이 눈에 보여서 Grunt를 설치 하고 있다.

3. 설치
3.1 grunt-cli 설치
grunt-cli는 grunt의 커맨드 라인 툴이며, grunt task runner는 포함하고 있지 않다. grunt-cli는 task runner인 grunt를 실행하는 역할만 한다. grunt는 여러가지 버전이 있으므로 전체로 설치된 grunt-cli가 개별 설치된 grunt를 실행한다고 이해 하면 된다.

$ npm install -g grunt-cli

3.2 grunt 설치
개발시에 사용되는 것이라는 표시를 하기 위해서  --save-dev  옵션을 주고 설치 한다.

$ npm install grunt --save-dev

package.json을 열어 보면 devDependencies 항목에 grunt가 포함되어 있다. --save-dev 옵션 때문에 여기에 포함된다. 추후 grunt 플러그인을 설치 할때도 동일하게 --save-dev 옵션을 사용 하면 된다.

4. Gruntfile.js 생성
grunt는 Gruntfile.js 파일을 이용하여 실행 된다. 프로젝트 디렉토리에 Gruntfile.js 파일을 생성 한다.

module.exports = function(grunt) {
  // Default task(s).
  grunt.registerTask('default', []);
};

생성한 파일은 default라는 task를 만들었고, 등록된 아무 일이 없는 것이다. 실행 하면 하는 일이 없기 때문에 안내 메시지만 남기고 종료 된다.

$ grunt default

Done, without errors.

5. 플러그인 설치
grunt에는 여러가지 플러그인들이 존재한다. 기본으로 사용되는 파일 용량을 줄여 주는 uglify 플러그인을 설치해 보도록 한다.

$ npm install grunt-contrib-uglify --save-dev

Gruntfile.js 을 다음과 같이 수정 하여 파일 압축이 되는지 확인 한다.

module.exports = function(grunt) {
    // project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/cli/config.js',
                dest: 'public/config.min.js'
            }
        }
    });

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

    // client task
    grunt.registerTask('client', ['uglify']);
};

다음 명령을 실행 한다.

$ grunt cli

6. Gruntfile.js 예제
아주 간단하게 사용 하는 예제 파일 이다. 옵션 사항은 대부분 기본이다. 혹시 각각의 플러그인에 대해서 어떻게 설정하는지 자세하게 알고 싶다면 grunt 사이트에서 확인 하는 것을 추천 한다.

예제 파일은 js 파일을 합치면서(concat) js 파일 검사(jshint) 하고, 최종으로 uglify를 적용 한다.

먼저 플러그인을 설치 한다.

$ npm install --save-dev grunt-contrib-concat
$ npm install --save-dev grunt-contrib-jshint
$ npm install --save-dev grunt-contrib-uglify
$ npm install --save-dev jshint-stylish

그리고 아래는 Gruntfile.js의 내용 이다.

module.exports = function(grunt) {
    // project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: '\n/* separator */\n',
                stripBanners: {
                    force: true,
                    all: true
                }
            },
            basic: {
                src: ['public/js/app/test/t1.js', 'public/js/app/test/t2.js'],
                dest: 'public/js/app/test/t3.js'
            },
            basic2: {
                src: ['public/js/app/test/t11.js', 'public/js/app/test/t22.js'],
                dest: 'public/js/app/test/t33.js'
            }
        },
        jshint: {
            options: {
                reporter: require('jshint-stylish')
            },
            beforeconcat: [
                'public/js/app/test/t1.js',
                'public/js/app/test/t2.js',
                'public/js/app/test/t11.js',
                'public/js/app/test/t22.js'
            ],
            afterconcat: [
                'public/js/app/test/t3.js',
                'public/js/app/test/t33.js'
            ]
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'public/js/app/test/t3.js',
                dest: 'public/js/app/test/t3.min.js'
            },
            build2: {
                src: 'public/js/app/test/t33.js',
                dest: 'public/js/app/test/t33.min.js'
            }
        }
    });

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

    // client task
    grunt.registerTask('default', ['concat', 'jshint', 'uglify']);
};