Gulp+WebPackで作るTypeScript開発環境【5分でできる！】

ゆーた

2016.01.06

こんにちは、フロントエンドエンジニアのゆーたです。
前回の「【TypeScript入門】特徴と機能の一部をまとめました」では、TypeScriptをサラッと触っていただきました。

今回はGulpとWebPackを使って、JavaScriptをコンパイル（トランスパイル）する環境を作ります。
gulpを叩くとTypeScriptがコンパイル（トランスパイル）されて、ローカルサーバーが立ち上がるのを今回のゴールにしたいと思います！

今回はNode.js、Gulp.js、WebPackがインストールされていることを前提に進めていきます。

インストールをしていない方はこちらから

Node.js、Gulp.js、WebPackをまだインストールをしていない方は以下の記事を参考にして、インストールしてみてください。

Node.js

Node.jsのインストールについてはこちらの記事が参考になります。

いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜

のびすけ

2014.04.30

Gulp.js

Gulpのインストールについてはこちらの記事が参考になります。

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

先生

2015.08.12

WebPack

WebPack単体の記事ではないのですが、こちらの記事も参考になります。

ECMAScript6で書こう！WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法

先生

2014.12.04

それでは順を追って作ってみましょう！

ディレクトリの準備

まずはディレクトリを用意します。
今回はts-templateフォルダの中にindex.htmlを置きました。

ts-template
└── index.html

作ったらterminalで移動しましょう。

package.json作成

package.jsonを作成します。

npm init

何かいろいろ聞かれますが、全て[enter]でOKです。

ts-template
├── index.html
└── package.json

モジュールのインストール

必要なモジュールをインストールしましょう！
まとめてインストールもできますが、今回は1つずつインストールしていきます。

gulp
gulp-connect
gulp-webpack
ts-loader
typescript

npm install gulp --save-dev
npm install gulp-connect --save-dev
npm install gulp-webpack --save-dev
npm install ts-loader --save-dev
npm install typescript --save-dev

全部終わると、以下のようなディレクトリ構成になります。

ts-template
├── index.html
├── node_modules
│   ├── gulp
│   ├── gulp-connect
│   ├── gulp-webpack
│   ├── ts-loader
│   └── typescript
└── package.json

tsファイルを作成

ts-templateフォルダ直下にsrcフォルダを作成します。
そしてsrcフォルダ内にtsフォルダを作成し、app.tsファイルとclass.tsファイルを作成しました。

ts-template
├── index.html
├── node_modules
│   ├── gulp
│   ├── gulp-connect
│   ├── gulp-webpack
│   ├── ts-loader
│   └── typescript
├── package.json
└── src
    └── ts
        ├── app.ts
        └── class.ts

webpack.config.jsを作成

webpack.config.jsをts-templateフォルダ直下に作成します。

var path = require('path');
module.exports = {
    entry: {
        app :'./src/ts/app.ts'
    },
    output: {
        filename: '[name].dist.js'
    },
    resolve: {
        root:[path.join(__dirname,'node_modules')],
        extensions:['', '.ts', '.webpack.js', '.web.js', '.js']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    }
}

ここまでで一度テストをします。

webpack

成功すると、ts-templateフォルダ直下にapp.dist.jsができます。

ts-template
├── app.dist.js
├── index.html
├── node_modules
│   ├── gulp
│   ├── gulp-connect
│   ├── gulp-webpack
│   ├── ts-loader
│   └── typescript
├── package.json
├── src
│   └── ts
│       ├── app.ts
│       └── class.ts
└── webpack.config.js

確認ができたら、app.dist.jsは削除してください！

gulpの設定

次はGulp.jsの準備をしていきます。
gulpfile.jsをroot直下に作成します。

var gulp = require('gulp');
var connect = require('gulp-connect');
var webpack = require('gulp-webpack');;
var webpackConfig = require('./webpack.config.js');

gulp.task('webpack', function () {
    gulp.src(['./src/ts/*.ts'])
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest('./dist'));
});

gulp.task('connect', function() {
  connect.server({
    root: [__dirname]
  });
});

gulp.task('watch', function () {
    gulp.watch('./src/**/*.ts', ['webpack']);
});

gulp.task('default', ['webpack','watch','connect']);

index.htmlの設定

簡単にhtmlを設定します。
まだdistフォルダはありませんが、gulpを実行すると自動的に作成されます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ts-template</title>
        <style>*{margin: 0;padding: 0;}</style>
    </head>
    <body>
        <script src="./dist/app.dist.js"></script>
    </body>
</html>

tsファイルを設定

class.tsではPersonクラス定義します。

class Person {
    constructor(
        private name:string = 'dummy'
    ) {}

    public say():void {
       alert('Hello, I\'m ' + this.name + '!!');
    }
}
export default Person;

app.tsではPersonクラスからインスタンスを作成しています。

import Person from './class';
var person = new Person('Steve');
person.say();

gulpを叩いてみよう！

完成です！
ts-templateフォルダ直下に移動して、gulpを叩いてみましょう！

[16:41:15] Starting 'webpack'...
[16:41:15] Finished 'webpack' after 229 ms
[16:41:15] Starting 'connect'...
[16:41:15] Finished 'connect' after 12 ms
[16:41:15] Starting 'watch'...
[16:41:15] Finished 'watch' after 10 ms
[16:41:15] Starting 'default'...
[16:41:15] Finished 'default' after 6.94 μs
[16:41:15] Server started http://localhost:8080
ts-loader: Using typescript@1.6.2
[16:41:16] Version: webpack 1.12.3
      Asset    Size  Chunks             Chunk Names
app.dist.js  1.9 kB       0  [emitted]  app

distフォルダ内にapp.dist.jsができていたら成功です。

ts-template
├── dist
│   └── app.dist.js
├── gulpfile.js
├── index.html
├── node_modules
│   ├── gulp
│   ├── gulp-connect
│   ├── gulp-webpack
│   ├── ts-loader
│   └── typescript
├── package.json
├── src
│   └── ts
│       ├── app.ts
│       └── class.ts
└── webpack.config.js

http://localhost:8080で確認できると思います。