gulpを使ったToDoアプリ(AngularJS + TypeScript)の開発環境自動化


大久保です。

最近、プロジェクトでTypeScriptを使い始めたのですが、JavaScriptと比較するとかなり使い勝手がよく、気に入っています。

プライベートでも使いたかったのですが、やっぱり、、

#### **編集・保存 → コンパイル実行 → ブラウザリロード**

というのはなかなかにめんどくさい。。

ということでタスクランナーでいいかんじにしたいなと思い、

AngularJS + TypeScriptで作られたToDoアプリをgulpで自動実行できるようなgulpfileを書いてみました。

## ToDoアプリについて
![20150712203840.png](https://qiita-image-store.s3.amazonaws.com/0/7885/ab310af1-d7e7-27d8-91b7-2e1075d9091a.png "20150712203840.png")


今回使ったToDoアプリの元は[todomvc](https://github.com/tastejs/todomvc)の[TypeScript & AngularJS](http://todomvc.com/examples/typescript-angular/#/)バージョンです。

今回はあくまでgulpの学習なので、ToDoアプリのソースに関しては[元のアプリ](https://github.com/tastejs/todomvc/tree/gh-pages/examples/typescript-angular)からほとんど変えてません。

## ディレクトリ構成

```
.
├── gulpfile.js   //gulpの設定ファイル
├── package.json  //依存パッケージ情報
├── index.html
├── release  　　　//コンパイル後のファイルが入るとこ
│   ├── css
│   └── js
└── src  　　   　 //コンパイル前のファイルが入るとこ
    ├── sass
    └── ts
```

## gulpfile.jsの設定

```js:gulpfile.js
var gulp = require("gulp");
var typescript = require("gulp-typescript");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browser = require("browser-sync");
var plumber = require("gulp-plumber");

gulp.task("server", function () {
    browser({
        server: {
            baseDir: "./"                       //サーバー起動時のベースディレクトリ
        }
    });
});

gulp.task("html", function () {
    gulp.src("*.html")                          //対象となるHTMLファイル
        .pipe(browser.reload({stream: true}));  //ブラウザを更新
});

gulp.task("sass", function () {
    gulp.src("./src/sass/**/*scss")             // 対象となるSASSファイルを全部指定
        .pipe(plumber())                        //エラー時にwatchを止めない
        .pipe(sass())                           //SASSのコンパイル
        .pipe(autoprefixer())                   //CSSのベンダープレフィックス付与を自動化
        .pipe(gulp.dest("./release/css"))       //指定ディレクトリにCSS出力
        .pipe(browser.reload({stream: true}));  //ブラウザを更新
});

//差分コンパイルのために事前にプロジェクト作成
var typescriptProject = typescript.createProject({
    target: "ES5",                              //ECMAScriptのターゲットバージョン
    removeComments: true,                       //コメントの削除
    sortOutput: true,                           //複数のファイルを連結する際に参照関係をもとにソート
    out: "main.js"                              //出力対象のファイル
});

gulp.task("typescript", function () {
    gulp.src(["./src/ts/**/*.ts"])              // 対象となるTypeScriptファイルを全部指定
        .pipe(typescript(typescriptProject))    // プロジェクトを渡す事で差分コンパイル
        .pipe(gulp.dest("./release/js/"))       //指定ディレクトリにJS出力
        .pipe(browser.reload({stream: true}));  //ブラウザを更新
});

//タスクの一括実行、各ファイルの監視実行
gulp.task("default", ["html", "sass", "typescript", "server"], function () {
    gulp.watch("./*.html", ["html"]);
    gulp.watch("./src/sass/**/*scss", ["sass"]);
    gulp.watch("./src/ts/**/*.ts", ["typescript"]);
});
```

#### gulpの挙動について
指定ディレクトリのhtml,sass,tsファイルが編集・保存されるとブラウザが自動リロードするようになってます。

コメントを読めばやってることは把握できるかと思うので詳しいタスクの説明は割愛します。

## 使い方
[ソース](https://github.com/yoppe/angularjs-typescript-gulp-todomvc)をcloneしたディレクトリで

```shell:パッケージのインストール
$ npm install
```

```shell:gulp実行
$ gulp
```

以上。

gulpを実行した段階で、ブラウザが立ち上がり以下のようなToDoアプリが動作すると思います。
![20150712203945.png](https://qiita-image-store.s3.amazonaws.com/0/7885/316003b5-4941-1347-fd1b-ed6c2b37265c.png "20150712203945.png")



## まとめ
会社では、Gruntを使っているのでその比較も兼ねてgulpを使ってみたのですが、直感的でとても書きやすいですね。

今回は、複雑なことをしていないので、実際に使う際どこまで使えるのかわかりませんが、プライベートでちょっとしたWebアプリを作る際には大した知識がなくても全然使えそうです。

また今回のコードは[Github](https://github.com/yoppe/angularjs-typescript-gulp-todomvc)に置いてるのでよければどうぞ。

学習用のシードプロジェクト程度には使えると思います。


## 参考サイト
* [Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ](http://liginc.co.jp/web/tutorial/117900)
* [gulp-tscとgulp-typescriptの利用方法の違いについて](http://qiita.com/yuichiroharai/items/42e559e2c15e1e5ffa39)
* [TodoMVC](https://github.com/tastejs/todomvc)