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

  • 10
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

やりたいこと

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"]
}

参考

この投稿は Node.js その2 Advent Calendar 20154日目の記事です。