[gulp ts] gulp 를 통한 typescript 변환

gulp 플러그인 설치 목록

import gulp from 'gulp';
import babel from 'gulp-babel';
import browserify from "browserify";
import vinylSourceStream from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import ts from 'gulp-typescript';
import tsify from 'tsify';
import sourceMaps from 'gulp-sourcemaps';

 

ts 번들을 위한 설정. 

const bundler = () =>{
    return browserify({
        basedir: '.',
        debug: true, //tsify는 번들된 JavaScript 파일 안에 소스 맵을 내보냅니다. 소스 맵을 사용하면 번들로 제공된 JavaScript 대신 브라우저에서 원본 TypeScript 코드를 디버깅할 수 있습니다.
        entries: ['src/ts/main.ts'],
        cache: {},
        packageCache: {}
    }).plugin( tsify ).bundle()
}
const tsToJs = () => {
    return bundler()
        .pipe(vinylSourceStream('main.js') )
        .pipe(buffer())
        .pipe( sourceMaps.init())
        .pipe( babel({
            presets: ['@babel/preset-env']
        }) )
};

const gulpTs=()=>{
    const tsProject = ts.createProject("tsconfig.json");
    return gulp.src('src/ts/*.ts')
        .pipe( tsProject() ).js
        .pipe( sourceMaps.init())
        .pipe( babel() )
}


const tsCompileClient = () => {
    return tsToJs()
        .pipe( sourceMaps.write('./'))
        .pipe( gulp.dest(paths.client.js) )
        //.pipe( browserSync.reload({stream:true}) )
}

 

아래 링크를 통해 많은 부분을 참고 하였다.

https://typescript-kr.github.io/pages/tutorials/gulp.html

TypeScript 한글 문서