gulp × TypeScript × Browserifyな開発環境構築


##概要

+ ビルドツール　： gulp
+ altJS　　　　： TypeScript
+ モジュール管理： Browserify

以下で説明していく開発環境のひな形はGitHubに置いてありますm(_ _)m
https://github.com/massa142/typescript-devenv

##前提
Node.jsインストール済み。
Node.jsのインストール方法に関しては、以下の記事が詳しいのでご参照ください。
[node.jsのversionを管理するためにnodebrewを利用する - Qiita](http://qiita.com/sinmetal/items/154e81823f386279b33c)

##参考にしたもの
[TypeScriptリファレンス Ver.1.0対応](http://www.amazon.co.jp/dp/484433588X/ref=olp_product_details?_encoding=UTF8&me=)
[gulpでbrowserifyを使う | 4uing](http://4uing.net/blog/gulp-browserify)

##Usage
1. npm install
2. gulp tsd
3. gulp (tsc| browserify | watch| minify)

##ファイル構成
```
root
├── src
│   ├── js               - コンパイルされたjsファイル
│   ├── ts               - TypeScriptファイル
│   ├── typings          - TypeScript型定義ファイル
│   └── tsd.json         - TypeScript型定義ファイルパッケージ
├── dest
│   └── js               - browserifyによってビルドされたjsファイル
│   　   └── min         - minifyされたjsファイル
├── gulp
│   ├── tasks
│   ├── config.js
│   └── gulpfile.js
├── node_modules
└── package.json

```

##gulpタスク
###tsd.js
tsd.jsonで指定したTypeScript型定義ファイルをinstallしてくる。

```
var gulp = require('gulp');
var tsd = require("gulp-tsd");

gulp.task("tsd", function (callback) {
    tsd({
        command: "reinstall",
        config: "../src/tsd.json"
    }, callback);
});
```

###tsc.js
TypeScriptコンパイラの役割をしてくれる。

```
var gulp = require('gulp');
var typescript = require('gulp-typescript');
var config = require('../config');

gulp.task('tsc', function(){
    gulp.src(config.ts.src)
        .pipe(typescript(config.ts.options))
        .js
        .pipe(gulp.dest(config.ts.dest));
});
```

※ IntelliJ IDEA(version 13以上)を使う場合は、以下の設定でもOK
（EcripseやWebStormもTypeScript用のプラグインが勿論ありますが、今回はIntelliJを取り上げました）

- 「NodeJS」「File Watchers」プラグインをインストール
- [Preferences] → [Languages & Frameworks] → [TypeScript]の設定をする

1. [Node interpreter]にnode.jsのパスを指定。nodebrewを利用している場合は~/.nodebrew/current/bin/nodeといった感じ。
2. [Generate source maps]をお好みで設定。(今回はチェックを外す)
3. [Command line options]に`--module commonjs --noImplicitAny` を記述。(`--module amd`でAMD指定のコンパイルも可能。`--noImplicitAny`は暗黙的なany型が存在する場合にコンパイルエラーを出してくれるオプションです。)
4. [Use output path]に上記のファイル構成のsrc/jsに相当するパスを指定。
5. [Enable TypeScript Compiler]にチェック。



###browserify.js
Browserifyでのビルドを行う。sourcemap付きでやってます。

```
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var config = require('../config');

gulp.task('browserify', function(){
    return browserify(config.browserify.entry)
        .bundle()
        .pipe(source(config.browserify.output.filename))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.browserify.dest));
});
```


###watch.js
src/ts配下のファイルに変更があれば、自動でTypeScriptコンパイル&Browserifyビルドがされるように。

```
var gulp = require('gulp');
var watch = require('gulp-watch');
var config = require('../config');

gulp.task('watch', function () {
    // IDEの恩恵を授かる場合は、以下の3行をコメントアウト
    watch(config.watch.ts, function () {
        gulp.start(['tsc']);
    });

    watch(config.watch.js, function () {
        gulp.start(['browserify']);
    });
});
```

###minify.js
dest/js配下のjsファイルを全てminifyしてくれる。

```
var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var config = require('../config');

gulp.task('minify', function () {
    gulp.src(config.js.src)
        .pipe(jsmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(config.js.dest));
});
```

###default.js
`gulp`と打つだけで、gulp watchが走るように。

```
var gulp = require('gulp');

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