gulpでTypeScriptをコンパイルする

2015/04/19 21:38 さすがに適当すぎたので、ちょっと書き直した。

酒とロックとTypeScript

ちょっと最近フロントな部分を勉強し始めまして、TypeScript面白いなーと。

そんで、どうやらgulpというものがいい感じにアレをアレしてくれるの。

そのことはじめってことで、掲題の件の通りまとめてみた。

やっぱこうやってブログに書くと、いくらかちゃんと記憶に定着しそうで。

まあ、クソみたいに簡単な内容なんだけど、”ことはじめ”って事でｗ

あと、今結構酔っぱらってて、そんな感じで書いてるので、間違ってたら突っ込んで下さい。

酔っぱらいながら勉強するなって話なんだけど

環境構築

nodebrew

これはNode.jsをインストールするためのもの。

前提としてhomebrewが既に入っている事。

$ brew install nodebrew

Node.js

下記で最新版のNode.jsがインストールされる。

$ nodebrew install latest

下記コマンドでバージョンが表示されればOK。

$ node -v

gulp

これはグローバルにgulpを入れるコマンド（日本語でOK）

$ npm install gulp -g

-gってのがグローバル領域にインストールするためのオプション。

この後作業ディレクトリごとにもgulpをインストールするのだけど、ここら辺（ってかnpm）あんまり分かってないので、あとで調べる。

このQiitaがいいかもめ。

qiita.com

作業ディレクトリをつくりましょう

src/はTypeScriptのソースを格納するディレクトリを想定。

$ mkdir -p helloworld/src
$ cd helloworld

ローカル（helloworldディレクトリ）にgulpをインストールしましょう

$ npm install gulp

TypeScriptをインストール

npm便利

$ npm install -g typescript

gulpからTypeScriptをコンパイルする為のgulp-tscをインストール

gulp-tsc

$ npm install gulp-tsc

gulpのbuild scriptを作成する

build scriptって表現があっているのかも分かってないんだけど、JavaScriptで書くし、それはさほど重要ではないし、つまりそういうこと。

$ touch gulpfile.js
$ vim gulpfile.js

var gulp = require('gulp');
var typescript = require('gulp-tsc');

gulp.task('tsc', function(){
  gulp.src(['src/**/*.ts'])
    .pipe(typescript())
    .pipe(gulp.dest('dest/'))
});

HelloWorld

やっぱ何はともあれハロワですね。

とはいえ、今日はコンパイルする所まで〜。

$ touch helloworld.ts
$ vim helloworld.ts

console.log("HelloWorld");

コンパイル

下記の様に、gulpfile.jsに記述した「tsc」タスクを起動する。

$ gulp tsc

すると、distディレクトリに（gulpfile.jsの定義）、TypeScriptファイルからコンパイルされたJavaScriptファイルが作成されているはず。

$ gulp tsc
[23:57:08] Using gulpfile ~hogehoge/HelloWorld/gulpfile.js
[23:57:08] Starting 'tsc'...
[23:57:08] Finished 'tsc' after 15 ms
[23:57:08] Compiling TypeScript files using tsc version 1.5.0-alpha

$ cat dest/helloworld.js
console.log("HelloWorld");

---

以上〜

ここからAngularJSとか使ってWebアプリをつくりたい。

あー、結構酔った。