なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2016/01/03

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

カテゴリー：

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");
  });
});

これで終わり。