2015/04/19 21:38 さすがに適当すぎたので、ちょっと書き直した。
ちょっと最近フロントな部分を勉強し始めまして、TypeScript面白いなーと。
そんで、どうやらgulpというものがいい感じにアレをアレしてくれるの。
そのことはじめってことで、掲題の件の通りまとめてみた。
やっぱこうやってブログに書くと、いくらかちゃんと記憶に定着しそうで。
まあ、クソみたいに簡単な内容なんだけど、”ことはじめ”って事でw
あと、今結構酔っぱらってて、そんな感じで書いてるので、間違ってたら突っ込んで下さい。
酔っぱらいながら勉強するなって話なんだけど
環境構築
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がいいかもめ。
作業ディレクトリをつくりましょう
src/はTypeScriptのソースを格納するディレクトリを想定。
$ mkdir -p helloworld/src $ cd helloworld
ローカル(helloworldディレクトリ)にgulpをインストールしましょう
$ npm install gulp
TypeScriptをインストール
npm便利
$ npm install -g typescript
gulpからTypeScriptをコンパイルする為の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アプリをつくりたい。
あー、結構酔った。