大久保です。
最近、プロジェクトでTypeScriptを使い始めたのですが、JavaScriptと比較するとかなり使い勝手がよく、気に入っています。
プライベートでも使いたかったのですが、やっぱり、、
編集・保存 → コンパイル実行 → ブラウザリロード
というのはなかなかにめんどくさい。。
ということでタスクランナーでいいかんじにしたいなと思い、
AngularJS + TypeScriptで作られたToDoアプリをgulpで自動実行できるようなgulpfileを書いてみました。
ToDoアプリについて
今回使ったToDoアプリの元はtodomvcのTypeScript & AngularJSバージョンです。
今回はあくまでgulpの学習なので、ToDoアプリのソースに関しては元のアプリからほとんど変えてません。
ディレクトリ構成
.
├── gulpfile.js //gulpの設定ファイル
├── package.json //依存パッケージ情報
├── index.html
├── release //コンパイル後のファイルが入るとこ
│ ├── css
│ └── 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");
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ファイルが編集・保存されるとブラウザが自動リロードするようになってます。
コメントを読めばやってることは把握できるかと思うので詳しいタスクの説明は割愛します。
使い方
ソースをcloneしたディレクトリで
パッケージのインストール
$ npm install
gulp実行
$ gulp
以上。
gulpを実行した段階で、ブラウザが立ち上がり以下のようなToDoアプリが動作すると思います。
まとめ
会社では、Gruntを使っているのでその比較も兼ねてgulpを使ってみたのですが、直感的でとても書きやすいですね。
今回は、複雑なことをしていないので、実際に使う際どこまで使えるのかわかりませんが、プライベートでちょっとしたWebアプリを作る際には大した知識がなくても全然使えそうです。
また今回のコードはGithubに置いてるのでよければどうぞ。
学習用のシードプロジェクト程度には使えると思います。