0%

Programmingプログラミングナレッジ

Posted:2020.04.29

Gulpでwebpackを使ったTypeScriptの自動コンパイル環境を作成してみる

これまでの記事で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で開発環境を構築

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】