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

大久保です。

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

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

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

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

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

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

ToDoアプリについて

f:id:taketor:20150722103810p:plain

今回使ったToDoアプリの元はtodomvcのTypeScript & AngularJSバージョンです。

今回はあくまでgulpの学習なので、ToDoアプリのソースに関しては元のアプリからほとんど変えてません。

ディレクトリ構成

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

gulpfile.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");</p>

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

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

<p>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}));  //ブラウザを更新
});</p>

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

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

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