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"); }); });
これで終わり。