Edited at

俺的gulpでTypeScriptをインクリメンタルビルドする

More than 3 years have passed since last update.


やりたいこと

jsという特殊な言語を開発するにあたって後方互換性をもった言語で開発し続けたいという事も理由の一つにあってTypeScriptを選択しました。

また、後々es6のブラウザ対応があった時に直ぐ移行できるようにしたいのでTypeScriptをes6にコンパイルした後、babelを通してes6->es5にトランスコンパイルするという形をビルドしていきます。


使うnpmパッケージ


  • babel-preset-es2015

  • typescript

  • gulp

  • gulp-typescript

  • gulp-babel

  • gulp-uglify


構成

.

+-- dist
| +-- *.js
+-- src
| +-- *.ts
+-- .babelrc
+-- .gitignore
+-- bower.json
+-- gulpfile.js
+-- package.json
+-- tsconfig.json


gulpfile.js

TypeScript -> ES6 -> JS ついでにuglifyで圧縮

TypeScriptの設定はtsconfig.jsonに、babelの設定は.babelrcに記述する


gulpfile.js


var gulp = require('gulp');
var uglify = require('gulp-uglify');
var babel = require('gulp-babel');
var ts = require('gulp-typescript');

tsProject = ts.createProject('tsconfig.json', function() {
typescript: require('typescript')
});

gulp.task('ts', function() {
tsProject.src('src/*.ts')
.pipe(ts(tsProject))
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

gulp.task('watch', function() {
gulp.watch('src/*.ts', ['ts'])
});

gulp.task('default', ['ts', 'watch']);



tsconfig.json

.tsが記述されるディレクトリのrootを"src/"に、

コンパイル後をes6に設定する


tsconfig.json

{

"compilerOptions" : {
"target" : "ES6",
"rootDir" : "src"
}
}


.babelrc

最新のbabelはpresetを設定する必要があるので、es6をes5にコンパイルするように


.babelrc

{

"presets": ["es2015"]
}


参考