【初心者向け】Gulp + Webpack + TypeScriptの設定

#環境
・Mac ターミナル(WindowsでもCygwinなどでOK）
・SublimeText（こちらもjsonファイルを編集できるソフトがあればOK）

##目次
1. Node.jsのインストール
2. package.jsonの作成
3. 各種モジュールのインストール
4. tsconfig.jsonの作成
5. TSファイルの作成
6. webpack.config.jsの編集
7. gulpfile.jsを作成
8. gulpの実行

基本は<a href="/d-dai/items/af40f61a0d559081e2b5">TypeScript+Gulp+WebPack+jQueryで開発環境を構築</a>なので、まずは一読されることをオススメします。

## 更新履歴
`2018.03.04`：
・グローバルインストールから「typings」を削除しました。
・「jQueryの型定義ファイルのインストール」の項目も併せて削除しました。
（TypeScript 2.0から「typings」の使用は非推奨のようです。）

`2018.05.01`：
・「tsconfig.json」ファイルの「files」箇所を修正しました。
・「config.ts」ファイルの「ENV」箇所を修正しました。

`2018.07.14`：
・各種モジュールのインストール箇所 ローカルインストールにjqueryを追加しました。

# <div id="section01">1.Node.jsをインストール</div>
Node.jsの公式サイトよりダウンロード、インストールを行ってください。
<a href="https://nodejs.org/en/" target="_blank">Node.js</a>

インストール後は、ターミナル(or Cygwin)でバージョンの確認を行っておきましょう。

```:ターミナル
node -v
```

```:ターミナル
npm -v
```

# 2. package.jsonの作成</div>
package.jsonファイルは必要なパッケージをインストールするために必要なファイルです。
適用するフォルダに作成してください。

ターミナルで直接フォルダ（プロジェクトルート）を開く方法が便利です。
参考：<a href="https://qiita.com/odorry/items/707f47495174c4b0bfc0">Finderから直接その場所のターミナルを開く方法</a>

```:ターミナル
npm init -y
```

プロジェクトルートに「package.json」ファイルが出来上がっているはずです。

>実行するとpackage.jsonが出来上がります。
>後述しますが、このファイルに記載されたライブラリ全てをnpm installで
>インストールできるようになりますので、他の人に配布時に環境構築が簡単にできます。

# 3. 各種モジュールのインストール
npmで必要な各種モジュールのインストールをします。

モジュールのインストールには「`グローバルインストール`」と「`ローカルインストール`」があります。
Gulpを使う場合、グローバル・ローカル両方のインストールが必要になります。

まず、「グローバルインストール」。
-gが「グローバルインストール」のオプションです。

```:ターミナル
npm i -g typescript gulp webpack-stream
```

次に「ローカルインストール」。
-Dが「ローカルインストール」のオプションです。

```:ターミナル
npm i -D typescript gulp webpack webpack-stream ts-loader jquery @types/jquery del
```
補足：`@types/jquery`はjQueryの型定義ファイルです。
詳しい説明は「<a href="/kohashi/items/d7a8ff57fe3a3e4c95f4">TypeScript2.0時代の、型定義ファイル</a>」をお読みください。

念のため、インストール後にモジュールの確認をしておくといいです。

```:ターミナル
npm ls --depth=0
```

# ４.tsconfig.jsonの作成

```:ターミナル
tsc --init
```

先人に習い、TypeScriptのコンパイル情報を記載する、「tsconfig.json」を以下のように書き換えます。

```:tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    },
    "files": [
        "ts/app.ts",
        "ts/model.ts",
        "ts/config.ts",
    ]
}
```

「tsconfig」の詳細は公式サイトをご覧ください。
<a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html" target="_blank">TypeScript公式サイト</a>

# 5. TSファイルの作成
tsディレクトリを作り、config.ts, model.ts, app.tsの3つのファイルを作っていきます。

## config.ts
```:config.ts
'use strict';
namespace Config {
    export const ENV:string = "dev";

}
export default Config;
```

## model.ts
```:model.ts
'use strict';
import Config from './config';

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

        public getName():string {
            if (Config.ENV != 'production') {
                return this.name
            } else {
                return this.name + 'さん';
            }
        }
    }
}
export default Model;
```

## app.ts
```:app.ts
'use strict';
import Model from './model';
import $ = require("jquery");
var user = new Model.Person("Mike");
$(() => {
    $("#name").html(user.getName());

});
```

# 6. webpack.config.jsの編集
プロジェクトルートに、webpackの設定ファイルである`webpack.config.js`を作成します。

```:webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV;
let config = {
    entry: {
        app :'./ts/app.ts'
    },
    output: {
        filename: '[name].js'
    },
    resolve: {
        extensions:['.ts', '.webpack.js', '.web.js', '.js']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV' : JSON.stringify(env)
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

if (env === 'production') {
    config.output.filename = '[name].min.js';
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }));
} else {
    config.devtool = 'source-map';
}

module.exports = config;
```

# 7. gulpfile.jsを作成
プロジェクトルートに、Gulpの実行ファイルである`gulpfile.js`を作ります。

```:gulpfile.js
var gulp = require('gulp');

// webpack
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');
var del = require('del');

var TS_SRC = './ts/**/*.ts';
var JS_DEST = './dist/js/';

gulp.task('clean', function() {
    del([JS_DEST]);
});

gulp.task('webpack', function () {
    return gulp.src([TS_SRC])
        .pipe(webpackStream(webpackConfig, webpack))
        // エラーが発生した時に終了させない
        .on('error', function(error) {
                this.emit('end');
        })
});

gulp.task('watch', function () {
    gulp.watch(TS_SRC, ['webpack']);
});

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

# 8. gulpの実行
プロジェクトルートで以下コマンドを実行してください。

```:ターミナル
gulp
```

「8. gulpfile.jsを作成」で設定した`dist/js/`フォルダに`app.js`ファイルが出来上がります。
あとは、htmlで`app.js`ファイルを読み込めば使えるはずです。