TypeScript 3 + gulp 4 で開発環境を構築する方法 / Twin Turbo Computing

はじめに

以前「webpack 4＋TypeScript 3＋globで開発環境をつくる」で webpack を使って TypeScript をコンパイルする方法をご紹介しましたが、
今回は TypeScript 3 と gulp で開発環境を構築する方法をご紹介します。

Node.js のインストール方法は割愛しますので、予めインストールしてください。

Node.js: https://nodejs.org/ja/

TypeScript: 3.8.3

gulp: 4.0.2

Node.js: 12.16.1

npm: 6.9.0

目次

package.json を作成
TypeScript 3 と gulp 4 をインストール
gulpfile.js を作成
サンプルコード作成とコンパイル
compilerOptions と tsconfig.json 読込
おわりに

1. package.json を作成

もし package.json がない場合は作成してください。今回は下記内容で試しました。

/package.json

{
  "private": true
}

2. TypeScript 3 と gulp 4 をインストール

下記コマンドで必要なライブラリをインストールします。

> cd \path\to\your-project
> npm install --save-dev gulp gulp-cli gulp-typescript typescript

今後バージョンが上がりうまく動かない場合には package.json の devDependencies を下記のように編集し、 npm install コマンドを実行すれば、同環境を構築できると思います。

/package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-cli": "^2.2.0",
    "gulp-typescript": "^6.0.0-alpha.1",
    "typescript": "^3.8.3"
  }
}

> npm install

バージョンが上がっている場合には、事情が無ければそちらを動かせるようにした方がいいと思います。その際は、まずは公式ドキュメントを調べることをおススメします。

Gulp · TypeScript: https://www.typescriptlang.org/docs/handbook/gulp.html
gulp-typescript - npm: https://www.npmjs.com/package/gulp-typescript

3. gulpfile.js を作成

gulpfile.js を下記のように作成します。

srcFiles の箇所は .ts ファイルを置くフォルダを gulpfile.js からの相対パスで書いてください。

outputDir はコンパイルした .js ファイルを置くフォルダを書いてください。

/gulpfile.js

const { dest, src, task, watch } = require("gulp");
const ts = require("gulp-typescript");

// ソースファイル
const srcFiles = "src/**/*.ts";

// 出力先
const outputDir = "js";

task("default", function() {
  // ソースファイルに変更があったら buildTs() を実行
  watch(srcFiles, buildTs);
});

/**
 * TypeScript ファイルをコンパイル
 */
function buildTs() {
  return src(srcFiles)
    .pipe(ts({}))
    .pipe(dest(outputDir));
}

task() | gulp.js: https://gulpjs.com/docs/en/api/task
watch() | gulp.js: https://gulpjs.com/docs/en/api/watch
dest() | gulp.js: https://gulpjs.com/docs/en/api/dest

4. サンプルコード作成とコンパイル

今回は下記サンプルコードで試しました。

/src/sample/main.ts

/**
 * Sample function
 */
function hello(compiler: string) {
  alert(`Hello from ${compiler}`);
}
hello('TypeScript');

/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>TypeScript Sample</title>
  <script src="js/sample/main.js"></script>
</head>
<body>
  <h1>TypeScript Sample</h1>
</body>
</html>

コンパイルは、gulpfile.js があるフォルダに移動して下記コマンドで実行し、main.ts を変更すると実行します。main.ts は内容を変更しなくても、上書き保存するだけでコンパイルされると思います。

コンパイルが完了すると js/sample/main.js が生成されます。

> npx gulp
[12:34:56] Using gulpfile \path\to\your-project\gulpfile.js
[12:34:56] Starting 'default'...
（ここで main.ts を変更 or 上書き保存）
[12:35:00] Starting 'buildTs'...
[12:35:02] Finished 'buildTs' after 1.23 s

処理をやめるときには ctrl + c を押してください。

5. compilerOptions と tsconfig.json 読込

TypeScript では compilerOptions を指定することでコンパイル時の設定を行うことができます。

Compiler Options · TypeScript: https://www.typescriptlang.org/docs/handbook/compiler-options.html

gulp-typescript では gulpfile.js で下記のように指定することができます。
下記例はコンパイル時にコメントを削除するオプションです。

/gulpfile.js

function buildTs() {
  return src(srcFiles)
    .pipe(ts({
        removeComments: true // ← 追加
    }))
    .pipe(dest(outputDir));
}

tsconfig.json を使いたい場合は、下記のように書けば OK です。

/gulpfile.js

const { dest, src, task, watch } = require("gulp");
const ts = require("gulp-typescript");
const tsProject = ts.createProject("tsconfig.json"); // ← 追加
...
function buildTs() {
  return src(srcFiles)
    .pipe(tsProject()) // ← 変更
    .pipe(dest(outputDir));
}

/tsconfig.json

{
  "compilerOptions": {
    "removeComments": true
  }
}

Basic Usage (gulp-typescript - npm): https://www.npmjs.com/package/gulp-typescript#basic-usage
Using tsconfig.json (gulp-typescript - npm): https://www.npmjs.com/package/gulp-typescript#using-tsconfigjson
Incremental compilation (gulp-typescript - npm): https://www.npmjs.com/package/gulp-typescript#incremental-compilation
tsconfig.json · TypeScript: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

6. おわりに

TypeScript や gulp での開発環境構築には様々な方法があり、設定ファイルの書き方も多様です。検索サイトで調べてみると色々な資料が見つかるとおもいます。

今回僕が紹介した方法もバリエーションの一つです。

大切なのは、各種資料を参考にしつつ公式ドキュメントも参照して環境構築することだと思います。なぜかというと、バージョン変更に伴い書き方や推奨する方法が変わったり、本記事も含めて資料にある方法が最適解とは限らないからです。

公式ドキュメントは英語なのでちょっと大変かもしれませんが、是非そちらも読んで、適切な環境構築を行っていただければと思っています。