빌드(Build) - Grunt와 Gulp

프론트엔드 코드와 에셋을 자동으로 빌드하기 위해, Grunt, Gulp, Browserify, Webpack 등의 Build Tool들을 사용할 수 있다. 이 중 Grunt와 Gulp는 여러 작업들을 자동화하는 Task Runner로서, 예를 들어, Sass를 CSS로 변환하거나, TypeScript들을 컴파일하거나, 여러 JavaScript들을 하나로 번들하거나, 소스파일을 minify 하거나, 이미지를 최적화하여 줄이거나 하는 등의 일을 할 수 있다. 여기서는 grunt/gulp를 사용하여 TypeScript 컴파일을 자동화하는 부분에 대해 알아본다.

Grunt

Grunt를 사용하기 위해서는 먼저 grunt 명령을 실행하는데 사용되는 "grunt-cli"를 설치한다.

    C> npm install -g grunt-cli 

Grunt는 실행할 Task에 대해 각각 플러그인을 가지는데, 자신에게 필요한 플러그인을 프로젝트 폴더 안의 package.json에 추가한 후, "npm install"을 실행하면, 필요한 Dependecy 파일들이 프로젝트로 폴더 안의 node_modules에 설치된다. 아래는 흔히 사용되는 플러그인을 설치하기 위한 package.json 파일의 예이다. TypeScript를 위한 grunt 플러그인으로 grunt-ts를 사용하는데, 아래에서 맨 마지막에 추가되어 있다.

    {
        "devDependencies": {
          "grunt": "^0.4.5",                    // Grunt 코어 모듈
          "grunt-contrib-cssmin": "~0.10.0",    // CSS minify
          "grunt-contrib-sass": "^0.7.3",       // Sass 처리
          "grunt-contrib-concat": "^0.5.0",     // Javascript concatenation
          "grunt-contrib-uglify": "^0.5.0",     // Javascript minify
          "grunt-ts": "^5.5.0"                  // TypeScript 플러그인 
        }
    }

다음으로 Grunt가 어떤 작업을 실행할 지를 Configuration 파일(Gruntfile.js)에 정의한다. 아래는 Gruntfile.js의 내용으로서, 여기서는 간단히 src 폴더에 있는 TypeScript 파일들을 컴파일하는 작업만을 정의하였다.

    module.exports = function(grunt) {
        grunt.initConfig({
            ts: {
                    default : {
                    src: ["src/*.ts"]
                }
            }
        });
        grunt.loadNpmTasks("grunt-ts");
        grunt.registerTask("default", ["ts"]);
    };    

위와 같이 모든 설정이 끝났으면, "grunt"를 실행하여 작업을 수행한다.

    C> grunt 

Gulp

Gulp는 Grunt와 비슷한 기능을 하는 빌드 도구로서, 먼저 gulp 명령을 실행하는데 사용되는 "gulp-cli"를 설치한다.

    C> npm install -g gulp-cli 

다음으로 프로젝트 폴더에서 "gulp"와 TypeScript를 위한 플러그인인 gulp-typescript을 설치한다.

    C> npm install gulp 
    C> npm install gulp-typescript

다음으로 아래와 같은 gulp 빌드 스크립트(gulpfile.js)를 작성한다. 여기서는 간단히 src 폴더에 있는 TypeScript 파일들을 컴파일하여 library.js 파일을 생성하는 작업을 수행한다.

    // gulpfile.js 
    var gulp = require("gulp");
    var ts = require("gulp-typescript");
    
    gulp.task("default", function () {
        var tsOut = gulp.src("src/*.ts")
            .pipe(ts({ out: "library.js"}));
        return tsOut.js.pipe(gulp.dest("build"));
    });

위와 같이 모든 설정이 끝났으면, "gulp" 명령을 사용하여 빌드를 실행한다. 위 코드에 따라 빌드 출력물로서 build/library.js가 생성된다.

    C> gulp 

참고: gulp 실행시 "Cannot find module 'typescript'" 에러가 나는 경우 아래를 실행해 본다.

    C> npm link typescript