[TypeScript 기초] 5. gulp를 이용한 빌드 자동화

4장까지 개발을 했으면 소스 변경 시 마다 tsc와 browserify 명령어를 실행하는 작업은 매우 귀찮은 작업입니다. 이를 자동화할 수 있는 방법이 있는데, 바로 build task 툴을 이용하는 것입니다. gulp, grunt, webpack 등이 있으나 여기서는 gulp를 기반으로 자동화 하겠습니다. webpack은 최근 React 빌드 툴로 쓰고 있는데, 이 또한 gulp를 plugin으로 사용하고 있습니다.

일단 필요한 모듈 패키지를 설치해 줍니다.

npm install browserify del errorify gulp gulp-typescript gulp-uglify run-sequence tsify typescript vinyl-buffer vinyl-source-stream watchify --save-dev

그 후 gjupfile.js를 root 폴더에 만들어 준 다음 다음의 task 정의를 작성해 줍니다. 여기서는 dev 환경의 task와 prod 환경을 위한 package task, 모두 두개를 정의하였습니다.

const gulp = require('gulp');
const browserify = require('browserify');
const watchify = require('watchify');
const errorify = require('errorify');
const del = require('del');
const tsify = require('tsify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const runSequence = require('run-sequence');
const uglify = require('gulp-uglify');
 
gulp.task('clean', () => {
    return del('./built/**/*')
});
 
gulp.task('prod', () => {
    browserify({
        basedir: '.',
        debug: true,
        entries: ['src'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest('built'));
});
 
gulp.task('dev', () => {
    browserify({
        basedir: '.',
        debug: true,
        entries: ['src'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .plugin(watchify)
    .plugin(errorify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('built'));
});
 
gulp.task('default', (done) => {
    runSequence('clean', 'dev', () => {
            console.log('Watching...')
            gulp.watch(['src/**/*.ts'], 
                       ['dev']);        
    });
});
 
gulp.task('package', (done) => {
    runSequence('clean', 'prod', () => {
            console.log('Watching...')
            gulp.watch(['src/**/*.ts'], 
                       ['prod']);        
    });
});

커맨드 창에서 이제 gulp를 실행하면 task가 자동으로 실행되며, 소스를 변경할 때 마다 자동 컴파일이 실행됩니다. gulp 명령어만 치면 default task가 실행되며, gulp package를 실행하면 prod 환경을 위한 task가 실행됩니다. dev와 prod task의 차이는 prod는 컴파일된 JavaScript를 번들하기 전 minification을 한다는 점입니다.

수고하셨습니다. 다음에는 유닛 테스트 방법에 대해 알아보도록 하겠습니다.