[Gulp] typescript 기능 추가하기

 

gulp-typescript 설치

npm install gulp-typescript typescript

 

gulpfile.babel.js에 추가

import gulp from "gulp";
import typescript from "gulp-typescript";

const routes = {
  ts: {
    watch: "src/ts/**/*.ts",
    src: "src/ts/*.ts",
    dest: "build/ts",
  },
};

const ts = () =>
  gulp
    .src(routes.ts.src)
    .pipe(
      typescript({
        noImplicitAny: true,
        outFile: "output.js",  //routes.js.dest의 위치에 output.js로 파일을 변환시킨다.
      })
    )
    .pipe(gulp.dest(routes.js.dest));
    
const assets = gulp.series([ts]);

export const dev = gulp.series([assets])

 

노마드코더에서 gulpfile.babel.js로 변환시켰던 기준으로 (참고 : https://leeda-cloud.tistory.com/64 ) 위처럼 추가했는데 그냥 gulpfile.js인 사람은 위의 방식이 아닌 아래 방식으로 추가하면 된다.

 

gulpfile.js에 추가

var gulp = require('gulp');
var ts = require('gulp-typescript');
 
gulp.task('default', function () {
    return gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            outFile: 'output.js'
        }))
        .pipe(gulp.dest('build/js'));
});

 

 

변환 전

변환 후

 

 

https://www.npmjs.com/package/gulp-typescript?activeTab=readme 

gulp-typescript