gulp v4 で typescript + sequelize を transpile する

sequelize も typescript で記述したい

sequelize v5 で typescript もサポートしたので、まるごと typescript化してトランスパイルにチャレンジしてみました。sequelize の標準構成である config/config.json も使いつつ、models/*.ts をdist/ 配下へトランスパイルして配置したいと考えました。

しかし、標準の tsc では typescript のファイルをトランスパイルしてくれますが、*.json などのファイルは指定した outDirへは配置してくれません。何事もなければ ./src 配下でファイルを作って、実行に必要なファイルを ./distへ配置するようにしたいと願ったとき、tscだけでは対処できないのでした。

gulp を使おう

そこで、タスクランナーである gulp の出番です。対象のファイルや機能毎に、個別にタスクを割り当ててバッチ処理を行えます。いわゆる make のようなものです。javascript で記述できるので、自由度も高いですね。

さて、元のディレクトリ構成はこんな感じです。migrations はマイグレーションでしか利用しないので、トランスパイルも不要ですし、sequelize-cli の吐き出すものをそのまま利用しています。実行時に必要なのは ./src/models と ./src/config/config.json です。

src
├── index.ts
├── config
│   └── config.json
├── migrations
│   └── 20190728*.js
├── models
│   ├── index.ts
│   ├── schema.ts
│   └── *****.ts
└── seeders

実行時の ./dist/ ではこのようなディレクトリ構成になってほしいわけです。

dist
├── config
│   └── config.json
├── models
│   ├── index.js
│   ├── schema.js
│   └── *****.js
└── index.js

gulp のタスクを実装して実行しよう

まず、必要なモジュールを入れておきます。

npm install --save gulp-cli gulp gulp-typescript typescript

gulp v4 になって、書き方もだいぶモダンになったので、それに合わせてタスクを書いてみます。
構成ファイルが複数になるのは切ないので、トランスパイルには tsconfig.json ファイルの内容を利用するようにしています。

const { src, dest, parallel, series } = require('gulp');
const ts = require('gulp-typescript');
const tsconfig = require('./tsconfig.json');

const config = {
  output: 'dist/',
  json: {
    source: 'src/**/*.json'
  }
}
const typescript = () => {
  return src(tsconfig.include)
    .pipe(ts(tsconfig.compilerOptions))
    .pipe(dest(config.output))
}

const json = () => {
  return src(config.json.source)
    .pipe(dest(config.output))
}

exports.typescript = typescript;
exports.default = series(parallel(typescript, json));

こんだけ。注意点は typescript() 内の .pipe(dest(...)) が必要なこと。

npx gulp

でどうぞ。

参考情報:
gulp-typescript