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

##参考にしたもの
TypeScriptリファレンス Ver.1.0対応
gulpでbrowserifyを使う | 4uing

##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']);