gulpでtypscriptをコンパイルする

##はじめに
今まではtscコマンドでコンパイルしていましたが、gulpの勉強も兼ねてgulpでコンパイルしてみます。

##準備
<a href="https://www.npmjs.com/package/gulp-typescript" target="_blank">gulp-typescript</a>を使います。

```
npm install gulp gulp-typescript --save-dev 
```

##ファイル構成

```
├── bower.json
├── bower_components
├── gulp
├── gulpfile.js
├── node_modules
├── package.json
└── www
     ├── common
     │   ├── js
     │   │   └── ts
     │   │        └── main.ts
     ├── dest
     └── index.html

```

##使い方

gulpfile.jsにtaskを定義していきます。

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


 gulp.task('ts', function() {
     
     //出力オプション
     var options =  {
         out: 'main.js'
     };

     gulp.src([
            './**/*.ts',
            '!./node_modules/**'//node_modules配下は除外する
          ])
         .pipe(typescript(options))
         .pipe(gulp.dest('./www/dest'));
 });
```

下記を実行。

```
gulp ts
```

www/dest配下にmain.jsが書き出される。
※outオプションを使用する場合はモジュールシステムが使用できなくなる。

出力オプションのoutオプションを使用しない場合、
dest配下に、tsファイルと、同じ階層構造でmain.jsが出力される

```
├── dest
│   └── www
│       └── common
│           └── js
│               └── ts
│                   └── main.js
```

tsファイルと同階層に書き出す場合は``gulp.dest('./')``とする。

```
└── www
     ├── common
     │   ├── js
     │   │   └── ts
     │   │        ├── main.js
     │   │        └── main.ts
     ├── dest
     └── index.html
```

##差分コンパイルをする

下記の記事より引用
><a href="http://qiita.com/yuichiroharai/items/42e559e2c15e1e5ffa39" target="_blank">gulp-tscとgulp-typescriptの利用方法の違いについて</a>

>差分コンパイルを行う場合は、typescript.createProject()を事前に呼び出してプロジェクトと呼ばれるオブジェクトを生成しておきます。
そして、このプロジェクトをコンパイル時に渡す事で、コンパイル済みのファイルがプロジェクトにキャッシュされて、更新のあったファイルのみがコンパイルされる仕組みになるようです。
速度面の比較などはまだ出来てないのですが、ファイル数が膨大になってくるほど恩恵が大きくなると思っています。


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


 gulp.task('ts', function() {
     
     //出力オプション
     var typescriptProject = typescript.createProject({
         sortOutput: true,        
         out: 'main.js'
     });

     gulp.src([
            './**/*.ts',
            '!./node_modules/**'//node_modules配下は除外する
          ])
         .pipe(typescript(typescriptProject))
         .pipe(gulp.dest('./www/dest'));
 });
```

##sorcemapを使う

<a href="https://www.npmjs.com/package/gulp-sourcemaps" target="_blnak">gulp-sourcemaps</a>を使用

```lang:gulpfile.js
 var gulp = require('gulp');
 var typescript = require('gulp-typescript');
 var sourcemaps = require('gulp-sourcemaps');


 gulp.task('ts', function() {
     
     //出力オプション
     var typescriptProject = typescript.createProject({
         sortOutput: true,        
         out: 'main.js'
     });

     gulp.src([
            './**/*.ts',
            '!./node_modules/**'//node_modules配下は除外する
          ])
         .pipe(sourcemaps.init())
         .pipe(typescript(typescriptProject))
         .pipe(sourcemaps.write('./'))
         .pipe(gulp.dest('./www/dest'));
 });
```

sourcemapが書き出される。

```
.
├── dest
│   ├── main.js
│   └── main.js.map
└── index.html
```

##options
###module
モジュールシステムを選択することができる。
commonjs, amd, umdを選択できる。

```
var options = {
   module: 'commonjs'
}
```

###target
ECMAScriptの利用する構文を指定できる。デフォルトはES3になる。
ES5とES6を設定することができる。

```
var options = {
   target: 'ES6'
}
```

###removeComments
コンパイル時にコメントを削除するかを設定できる。

```
var options = {
   removeComments: true
}
```

###sortOutput
複数のファイルを連結する際に、依存関係保って並び替えてくれる。

```
var options = {
   removeComments: true
}
```

###noImplicitAny
暗黙的にany型を使っている部分でエラーを発生してくれる。

```
var options = {
   noImplicitAny: true
}
```

###その他オプション
　<a href="https://www.npmjs.com/package/gulp-typescript#options" target="_blank">その他</a>

##その他
使っていくと色々設定したいことが増えてくると思うので、追記していこうと思います。