TypeScriptでBrowserifyが使える、 tsifyを知ったのですが、
ビルドの時間が遅いし、毎回「gulp XXX」って打つのが大変なので、
watchifyと一緒に使えないかな・・・と思いました。
次のようなgulpfile.jsを作りました。
var gulp = require("gulp");
var watchify = require("watchify");
var browserify = require("browserify");
var tsify = require("tsify");
var source = require("vinyl-source-stream");
gulp.task("watchify-tsify", function() {
var b = watchify(browserify({
entries: [ "./ts/a.ts", "./ts/b.ts", /* ... */],
cache: {},
packageCache: {}
}));
function runBundle() {
return b.plugin(tsify, {
noImplicitAny: true,
target: "es5"
}).bundle().pipe(source("./all.js")).pipe(gulp.dest("./js/"));
}
b.on("update", runBundle);
b.on("log", function(msg) {
console.log(msg);
});
bundle();
});
-
gulp watchify-tsifyと実行する。 -
./ts/a.ts、./ts/b.tsを監視する。 - watchifyでupdateが発生するたびに、
runBundle()を呼び出す。 - b.pluginでtsifyを読み込み、
js/all.jsを出力する。