Help us understand the problem. What is going on with this article?

gulp-typescript で --target es6 から babel に通しつつ Incremental Buildする

More than 3 years have passed since last update.

ivogabe/gulp-typescript

元々typescriptなんてtscを生で叩けばいいじゃん派だったのだが、--target es6 で吐いたのをさらにbabelに通す必要があって、一旦書きだしたものをさらにbabelを通そうとすると、tmpなディレクトリが必要になるし、ファイルIOに負荷がかかるので、gulpのストリームの中で変換したかった。

やりたいこと

node / electron で走らせたかったので browserify せずに src -> lib に書き出す。lib は es5 仕様。

src/
    foo.ts
    bar.ts
lib/
    foo.js
    bar.js

ブラウザ用に書き出すときは必要に応じてbrowserifyする。debug中はElectronで走らせることでbrowserifyをスキップしたかった。

最初はbabelのrequire.extensions を拡張していたのだが、babel上での変形が重すぎた。

やりたいこと2

インクリメンタルビルド

gulpfile.coffee

  • tsconfig.json に --target es6 とか諸々を書く。
  • devDependencies に typescript: 1.6.0-dev.20150909 等を書く(async/awaitを使いたいのでnightly)
  • gulpfileを書く
ts = require 'gulp-typescript'
replace = require 'gulp-replace'
rename = require 'gulp-rename'
babel = require 'gulp-babel'
tsProject = ts.createProject 'tsconfig.json',
  typescript: require 'typescript'
  sortOutput: true

gulp.task 'build:ts', ->
  tsProject.src()
    .pipe ts(tsProject)
    .pipe rename (p) -> p.dirname = p.dirname.replace('src', ''); p
    .pipe babel()
    .pipe gulp.dest 'lib'
gulp.task 'watch:ts', ->
  gulp.watch('src/**/*.ts', ['build:ts'])

なんかこのままだと src -> lib/src に相対変換されたので、gulp-renameで無理やり書き換えた。もっと綺麗にやる方法はちゃんとありそう…

$ gulp watch:ts で監視を開始して、適当な src/index.ts を複数回保存してみて、自分の手元で最初は2.28s だったのが次は1.1s だったりしたのでたぶんインクリメンタルビルドできてると思う。

It works

参考

gulp-tscとgulp-typescriptの利用方法の違いについて - Qiita

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away