主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2016/01/03
Electron + TypeScript で開発しているのですが、
いちいちコンパイルし直すのがめんどくさいので、 gulp で自動化してみます。
まず、ディレクトリ構成としては、こんな感じを想定しています。
/ ............... ルートディレクトリ
|- app .......... 出力されたもの
|- src .......... ソースファイル
|- gulpfile.js .. 言わずもがな
src
にある TypeScript ソースを、 app
に JS として出力していきます。
とりあえず、まずはコンパイルのみ。
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");
});
});
これで終わり。