これまでの記事でTypeScriptをコンパイルする方法について色々とまとめてきました。今回はさらにGulpを使ってタスクとして自動検知されるようにして、TypeScriptがコンパイルできるようにしていきたいと思います。 （こちらの記事も参考に） 「webpackでTypeScriptの自動コンパイル環境を作成してみる」 「TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる」   まずは必要なパッケージをnpmでインストールしていきます。今回はGulpの方でローカルサーバーと自動ブラウザリロードを利用します。Gulp関連のパッケージは2種類、TypeScript、webpack関連のパッケージは5種類となっています。

$ npm install --save-dev gulp browser-sync
$ npm install --save-dev typescript webpack webpack-cli webpack-stream ts-loader

  パッケージのインストールが完了すると、package.jsonのdevDependenciesに追加されているのが確認できます。また、この時にGulpのタスク検知のコマンドをscriptsに指定しておきます。 【package.json】

{
 ....... 
 "scripts": { 
  "dev": "npx gulp"
 },
 "devDependencies": {
  "gulp": "^4.0.2",
  "browser-sync": "^2.26.7",
  "ts-loader": "^7.0.1",
  "typescript": "^3.8.3",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.11",
  "webpack-stream": "^5.2.1"
  .......
 }
}

  今回はサンプルとして下記のようなファイル・ディレクトリの構成を用意しています。ソースファイルと出力用ファイルのディレクトリをそれぞれ分けておきます。そしてwebpackの設定ファイルである「webpack.config.js」とTypeScriptの設定ファイルである「tsconfig.json」そしてGulpのタスクを登録する「gulpfile.js」も用意していきます。

node_modules
dist
  ┣ （main.js）
  ┗ index.html
src
  ┣ index.ts
  ┗ modules
    ┗ module.ts
webpack.config.js
tsconfig.json
gulpfile.js

  まずは、webpackの設定ファイルを見ていきます。こちらもTypeScriptのコンパイルに合わせた内容で問題ありません。TypeScriptのコンパイルに必要な設定を適宜行なっていきます。詳しくはこちらの記事「webpackでTypeScriptの自動コンパイル環境を作成してみる」もご参考ください。 【webpack.config.js】

module.exports = {
 mode: 'development',
 entry: './src/index.ts',
 output: {
  path: `${__dirname}/dist`,
  filename: 'main.js'
 },
 module: {
  rules: [
   {
    test: /.ts$/,
    use: 'ts-loader'
   }
  ]
 },
 resolve: {
  extensions: [
   '.ts', '.js'
  ]
 }
}

  続けて、TypeScriptの設定ファイルも作成していきます。こちらも同じく必要な設定を適宜行なっていきます。webpackの設定ファイル同様、こちらの記事「TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる」でもまとめていますのでご参考に。 【tsconfig.json】

{
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "es2015", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true
 }
}

  最後に、今回の本題であるGulpのタスクを作成していきます。Gulpではbrowsersyncを使った自動リロードとローカルサーバー、そしてwebpackのビルド実行をタスク化していきます。Gulpでwebpackのコマンドを実行する際には「webpack-stream」というパッケージを使うことになります。そしてその中で、webpackの設定ファイルを参照することで、設定した内容でビルドできるようになります。 【gulpfile.js】

const { src, dest, watch, parallel } = require("gulp"),
 browsersync = require('browser-sync').create(),
 webpackStream = require('webpack-stream'),
 webpackConfig = require('./webpack.config.js'),
 webpack = require('webpack');

// Local server & Browser sync
const taskServer = (done) => {
 browsersync.init({
  server: {
   baseDir: 'dist/',
   index: 'index.html'
  },
  port: 2000
 })
 done();
};
const taskReload = (done) => {
 browsersync.reload();
 done();
};

// webpack & TypeScript
const taskTs = () => 
 webpackStream(webpackConfig, webpack)
  .pipe(dest('dist/assets/js'));

// Wacth tasks
const taskWatch = (done) => {
 watch('dist/**/*', taskReload);
 watch('src/**/*.ts', taskTs);
 done();
}

exports.server = taskServer;
exports.ts = taskTs;

exports.default = parallel(taskServer, taskWatch);

  もちろんGulp側ではwebpackのビルドタスク実行だけでなく、監視タスクも用意しておきます。こうすることでTypeScriptファイルが編集され保存したタイミングでビルドとブラウザの自動リロードが実行されるようになります。   最後にサンプルのTypeScriptファイルを作成していきます。今回もモジュールとして読み込むスクリプトも用意しています。 【src/index.ts】

import moduleFunction from './modules/module';

console.log(moduleFunction('Hello World!'));

  【src/modules/module.ts】

export default function moduleFunction(message: string): string {
 return message;
}

  これでGulp経由でwebpackを使ったTypeScriptのコンパイル環境が出来上がりました。Gulpのタスクを下記のコマンドで実行してみます。

$ npm run dev

  問題なくビルドされると、ブラウザが自動でリロードされますので、TypeScriptで書いた処理をコンソールを見てみますと、実行されているのが確認できますね。 【console】

Hello World!

 

---

  今回はGulpとwebpackそしてTypeScriptを組み合わせた環境構築を行なってみました。webpackはどちらかというとスクリプトファイルなどのバンドルが主な目的のため、タスク化してGulpなどのタスクランナーで管理するのが使いやすいのではないでしょうか。いろんなツールがありますが長所に合わせて使い分けていきたいですね。   （参考にさせて頂いたサイト） TypeScript+Gulp+Webpack+jQueryで開発環境を構築