gulp.js で TypeScript をコンパイルするプラグインを作った

タスクランナー Grunt の対抗馬として今年あたりブームがきそうな gulp.js ですが、TypeScript をコンパイルするプラグインが見当たらなかったので作りました。

https://npmjs.org/package/gulp-tsc

https://github.com/kotas/gulp-tsc

使い方

npm install --save-dev gulp-tsc

して gulpfile.js で以下のように require('gulp-tsc') するだけで使えます。

var gulp = require('gulp');
var typescript = require('gulp-tsc');

gulp.task('compile', function () {
  gulp.src(['src/**/*.ts'])
    .pipe(typescript())
    .pipe(gulp.dest('dest/'));
});

上の例の場合は src 以下の .ts ファイルを、ディレクトリ構造を維持したまま .js ファイルに変換して dest 下に保存します。

1ファイルにまとめたい場合は out オプションでファイル名を指定するだけです。

gulp.task('compile', function () {
  gulp.src(['src/**/*.ts'])
    .pipe(typescript({ out: 'unified.js' }))
    .pipe(gulp.dest('dest/'));
});

上の例の場合は src 以下の .ts ファイルを依存順で結合して、dest/unified.js として保存します。

TypeScript のバージョン

Grunt のプラグインでもありがちなのですが、コンパイルに使う tsc コマンドがプラグインに同梱されている場合に、TypeScript のバージョンがそのプラグイン同梱版に固定されてしまう、という問題があります。

例えば、少し古いバージョンの TypeScript でコンパイルしたいのに、プラグインをバージョンアップしたら TypeScript のバージョンまで更新されてしまって困る、という話がありました。

gulp-tsc では、この問題を回避するためコンパイルに使う tsc コマンドを以下の順番で検索するようになっています。

1. カレントディレクトリ/node_modules/typescript/bin/tsc
2. シェルの PATH での tsc (which tsc で見つかるもの)
3. gulp-tsc に同梱されている TypeScript の tsc (バージョンは gulp-tsc に依存)

つまり、プロジェクトの package.json に使いたいバージョンの typescript モジュールを devDependencies (または dependencies) で指定しておくことで、自由にバージョンを選択できるようにしました。

余談: gulp.js プラグインのテストについて

余談なのですが、gulp.js プラグインのテストをするにあたって、「ちゃんとファイルが生成されているのか」を知りたい時があります。

この gulp-tsc でも、コンパイル作業が外部コマンドに依存しているため、ファイルが想定したパスで正しく生成されているかを検証する必要がありました。

で、それを検証するための gulp.js プラグインも作りました。

https://github.com/kotas/gulp-expect-file

これを使うと、pipe() を通してファイルが正しく生成されているか、内容が正しいか、簡単に検証する事ができます。

gulp-tsc でも、これを使って実際に gulp を通して TypeScript をコンパイルするテストを作っています。

https://github.com/kotas/gulp-tsc/blob/master/test-e2e/gulpfile.js

おわりに

gulp.js で TypeScript をコンパイルする gulp-tsc を紹介しました。

いつでも pull request や issue 等お待ちしています！

Enjoy!