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

gulp.srcのglobからtsconfig.jsonのfilesを更新するプラグインを作った

More than 3 years have passed since last update.

[追記]
Gulpプラグインで受け取れるファイルストリームが順不同で、実行するたびにfilesの順序が変わる可能性がある。
ので、atom-typescriptと同じようにfilesGlobを展開するだけのCLIを作ったのでこっちを使って欲しい。
laco0416/tsconfig-cli
Globの展開に使ってるのはatom-typescriptの内部でも使われてるTypeStrong/tsconfigなので、割と信用していいはず。少なくともnpmにある他のtsconfig展開系CLIはどれも独自にglob展開しているので使いたくなかった。
tsconfigに設定を集める、タスクランナーに設定を持たないべきという思想のメモという意味でこの記事は残す


@laco0416です。gulp.srcのglobパターンからtsconfig.jsonのfilesを更新するプラグインを作りました。

gulp-tsconfig-update
https://www.npmjs.com/package/gulp-tsconfig-update

TypeScript1.6で不要になりました!→やっぱり必要でした

TypeScript 1.6からtsconfig.jsonにexcludeプロパティが生えますのでnode_modulesあたりをぶち込んでおけば幸せっぽい!
詳しいTypeScript 1.6の変更点はこちら
1.6来るのはわかってたけどまさか5日で要らない子になるとは思ってなかった
excludeだけだとコンパイルの順序を指定できないのでよくない。やっぱりglob必要だった。

やりたかったこと

昨日@vvakameさんとご飯を食べながら話していたら

laco「gulp-typescriptにオプション渡すのおかしい気がしてきた」
vv「tsconfig.json使おう?」
laco「filesにファイル指定するの人間の仕事じゃなくないですか?」
vv「atom-typescriptはfilesGlobを解釈して展開してくれるんだよなぁ」
laco「じゃあgulpとかGruntからglob与えてtsconfig.jsonのfilesに展開したらよくないです?」
vv「正しそう!」

ということで作った。ちなみにGrunt版はvvakameさんが作った。
grunt-tsconfig-update
https://www.npmjs.com/package/grunt-tsconfig-update

出来上がったもの

こういう状態で

├── gulpfile.js
└── src
    ├── bar.ts
    └── foo.ts

gulpでこうすると

gulpfile.js
var gulp = require("gulp");
var tsConfig = require('gulp-tsconfig-update');

gulp.task('tsConfig', function() {
  return gulp.src("./src/**/*.ts")
      .pipe(tsConfig());
});

これが出てくる。

tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": true,
        "removeComments": false,
        "noLib": false,
        "preserveConstEnums": false,
        "suppressImplicitAnyIndexErrors": false
    },
    "files": [
        "./src/bar.ts",
        "./src/foo.ts"
    ]
}

./tsconfig.jsonが既に存在していればfilesだけ上書きして、存在しないならデフォルトのcompilerOptionsを設定して書き出す。

嬉しい事

「どのファイルをコンパイルするか」という責任と「どうコンパイルするか」という責任を分割して適切に委譲できた気がする。

gulp-typescriptやgulp-tsを使うのは一見楽(?)でいいのだけど渡したオプションがどう処理されてコンパイルされるのか、自分が指定したオプションが適切に反映されているのかを保証するにはソースを読むしかなくて、加えてtscのアップデートに対応できているのか、メンテされているのかという心配でストレスが少し増える。
そこでtsconfig.jsonを使うようにすることでtscだけに依存するビルド環境になった。
「gulp-tsconfig-updateに依存してるじゃん」というのは、何かが起きても手でJSON編集すればいい話なのでそこまで問題じゃないと思っている。「このプラグインが壊れると開発が止まる」という相手を極力減らすことが重要だという認識。背中を預ける相手はできるだけ少なくしたい。

学び

gulpプラグインは比較的楽にTypeScriptで書けた

基本的なモジュールは型定義ファイルがある。

  • node.d.ts
  • gulp-util.d.ts
  • through.d.ts
  • vinyl.d.ts
  • gulp.d.ts

のおかげでだいぶ捗った。
map-stream.d.tsがなかったのがつらかったけどフィーリングでなんとかなった。

まとめ

Issue, PR, その他フィードバックお待ちしてます。

Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした