みかづきメモ

学習したことのメモとか、日記とか、備忘録。

gulp で TypeScript のコンパイルを自動化する

Electron + TypeScript で開発しているのですが、
いちいちコンパイルし直すのがめんどくさいので、 gulp で自動化してみます。


まず、ディレクトリ構成としては、こんな感じを想定しています。

/ ............... ルートディレクトリ
|- app .......... 出力されたもの
|- src .......... ソースファイル
|- gulpfile.js .. 言わずもがな

src にある TypeScript ソースを、 app に JS として出力していきます。

TypeScript のコンパイル

とりあえず、まずはコンパイルのみ。

var gulp = require('gulp');
var babel = require('gulp-babel');
var rename = require('gulp-rename');
var plumber = require('gulp-plumber');
var typescript = require('gulp-typescript');

var merge = require('event-stream').merge;

gulp.task('ts:compile', function() {
  var tsResult = gulp.src(['./src/**/*.tsx', './src/**/*.ts'])
                   .pipe(plumber())
                   .pipe(typescript(tsProject));

  tsResult.pipe(babel())
    .pipe(rename(function(path) { path.dirname = path.dirname.replace('ts', 'js') }))
    .pipe(gulp.dest('./app/'));
});

コンパイル対象として、 *.ts と、 TypeScript React の *.tsx を指定しています。
また、監視タスクから呼び出された際にエラーで死なないように、
plumber を挟んで、コンパイルに失敗しても継続するようにしています。

コンパイル自動化

*.ts*.tsx が作成、保存、削除された際に、それを自動で適用するようにします。
監視には、 gulp-watch を使用します。
これは、 gulp.watch を使用すると、ファイルの作成が検知できないためです。

var watch = require('gulp-watch');

gulp.task('watch', function() {  
  watch('./src/**/*.{ts,tsx}', function() {
    gulp.run('ts:compile'); 
  });
});

これで終わり。