Programming language/javascript
[gulp ts] gulp 를 통한 typescript 변환
hello-world
2021. 1. 8. 11:16
728x90
반응형
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
728x90
반응형