gulp-typescript で --target es6 から babel に通しつつ Incremental Buildする

ivogabe/gulp-typescript

元々typescriptなんてtscを生で叩けばいいじゃん派だったのだが、--target es6 で吐いたのをさらにbabelに通す必要があって、一旦書きだしたものをさらにbabelを通そうとすると、tmpなディレクトリが必要になるし、ファイルIOに負荷がかかるので、gulpのストリームの中で変換したかった。

やりたいこと

node / electron で走らせたかったので browserify せずに src -> lib に書き出す。lib は es5 仕様。

src/
    foo.ts
    bar.ts
lib/
    foo.js
    bar.js

ブラウザ用に書き出すときは必要に応じてbrowserifyする。debug中はElectronで走らせることでbrowserifyをスキップしたかった。

最初はbabelのrequire.extensions を拡張していたのだが、babel上での変形が重すぎた。

やりたいこと2

インクリメンタルビルド

gulpfile.coffee

• tsconfig.json に --target es6 とか諸々を書く。
• devDependencies に typescript: 1.6.0-dev.20150909 等を書く(async/awaitを使いたいのでnightly)
• gulpfileを書く

ts = require 'gulp-typescript'
replace = require 'gulp-replace'
rename = require 'gulp-rename'
babel = require 'gulp-babel'
tsProject = ts.createProject 'tsconfig.json',
  typescript: require 'typescript'
  sortOutput: true

gulp.task 'build:ts', ->
  tsProject.src()
    .pipe ts(tsProject)
    .pipe rename (p) -> p.dirname = p.dirname.replace('src', ''); p
    .pipe babel()
    .pipe gulp.dest 'lib'
gulp.task 'watch:ts', ->
  gulp.watch('src/**/*.ts', ['build:ts'])

なんかこのままだと src -> lib/src に相対変換されたので、gulp-renameで無理やり書き換えた。もっと綺麗にやる方法はちゃんとありそう…

$ gulp watch:ts で監視を開始して、適当な src/index.ts を複数回保存してみて、自分の手元で最初は2.28s だったのが次は1.1s だったりしたのでたぶんインクリメンタルビルドできてると思う。

It works

参考

gulp-tscとgulp-typescriptの利用方法の違いについて - Qiita