Gulp with Typescript

Javascript 에서

Typescript로 마이그레이션할 때 어떤 고민을 하시나요?

 

마이그레이션을 해야할 것 중 하나는 gulpfile.js 입니다.

(사실 Typescript는 es5 < es6 < Typescript 형태로 일반 es6 Javascript를 포함하기 때문에 gulpfile.js 를 그대로 사용해도 무방합니다.)

 

gulpfile.js 는 gulp를 사용하기 위한 시작점입니다. 이 gulpfile.js에 task 들이 정의되어 있습니다.

 

보통 아래와 같은 형태로 gulpfile.js를 정의하고 있습니다.

 

// gulpfile.js

var gulp = require('gulp');
var del = require('del');

gulp.task('copy', () => 
	return gulp.src('./src')
        	.pipe(gulp.dest('./dist'))
);
gulp.task('clean', () =>
	return del(['./dist/**'])
);

 

위의 예제는 copy 라는 task로 ./src 폴더에 있는 내용을 ./dist 로 복사하는 부분입니다.

clean 은 'del' library를 사용해 ./dist 폴더를 지우는 task를 담당합니다.

 

 

물론 이대로 구성해도 문제없이 돌아갑니다. 하지만!

이왕 Typescript로 마이그레이션 하는 김에 gulpfile.js 도 gulpfile.ts 로 바꾸고 싶지 않으신가요?

 

gulpfile.ts 파일을 작성해보죠.

 

그 전에, 필요한 Package 를 설치하겠습니다. Typescript로 작성하는 것이기 때문에 typescript와

조금 더 세련(?) 된 ts 파일 작성을 위해 gulpclass를 설치하겠습니다. gulpclass의 용도는 더 아래 코드에서 확인할 수 있습니다.

// intall npm package
npm install typescript --save-dev
npm install gulpclass --save-dev

 

그 다음, gulpfile.ts 를 작성합니다.

 

// gulpfile.ts

import {Gulpclass, Task} from "gulpclass/Decorators";
import * as gulp from 'gulp';
import * as del from 'del';

@Gulpclass()
export class Gulpfile {

    @Task()
    copy(cb: Function) {
        return gulp.src('./src').pipe(gulp.dest('./dist');
    }


    @Task()
    clean(cb: Function) {
        return del(["./dist/**"], cb);
    }
}

일반적인 gulpfile typescript 버전 입니다.

고민은 이제 시작입니다. Gulp는 Task manager 입니다. Typescript(.ts) 파일을 Javascript(.js)로 Transcompile 하는 Task를 분명 Gulp 내부에 선언했을 겁니다. 그런데 gulpfile 자체가 Typescript 입니다.

그렇다면, gulpfile.ts 를 tsc 명령어로 먼저 컴파일 한 후에 gulp를 쓸 수 있을까요?

 

이렇게 된다면 굉장히 낭비입니다. 뭔가 반쪽짜리 Task Manager를 쓰는 느낌이랄까요 :(

현재 Gulp는 gulpfile.js 를 참조 합니다.

 

그럼, gulpfile.js 를 만들어 보겠습니다.

// gulpfile.js

eval(require("typescript").transpile(require("fs").readFileSync("./gulpfile.ts").toString()));

의미인 즉슨, Typescript로 만들어진 gulpfile.ts 를 읽어들여 Javascript로 Transcompile 하는 것 입니다.

 

이렇게 되면, Task 작성은 Typescript(.ts) 로 해도 Javascript(.js)로 변환하는 작업이 따로 필요없습니다.

일종의 트릭 아닌 트릭입니다. (그래도 매우 깔끔한 방법입니다.)

 

 

정리

• Gulp는 gulpfile.js (Javascript file) 을 참조
• gulpfile.ts (Typescript)를 작성
• gulpfile.js 에서 Typescript 로 작성된 gulpfile.ts 를 읽어들여 Transcompile
• Gulp 실행 시, gulpfile.js 참조 -> 내부적으로 gulpfile.ts Transcompile -> gulpfile.ts 의 Task 사용 가능