jadeとは

jadeはnodeのテンプレートエンジン。（拡張子.jadeです）
htmlに変換します。

面倒な閉じタグ書く必要がなくなります。
Emmet使えば閉じタグが面倒なことはないのですが。

インストールの仕方

黒い画面ひらいて、

npm install -g jade
jade --version

を入力します。
jadeのバージョンがでてきたら、インストール完了です。

・ネストはインデントで示すので、閉じタグ書く必要はありません。
・デフォルトのタグはdivです。（idとclassをそのまま書くとdivになります。）
・日本語だからといってクオートで囲まなくていいです。
・CSSのように、idは#、classは、.で書けます。

・変数名 ＝ 値
・-var 変数名 = 値

・タグのあとに＝
・#{変数名}

hoge = '今日の天気は晴れだ。'
- var hoge2 = '眠い。'

p= hoge
p 15時になると #{hoge2}

↓

<p>今日の天気は晴れだ。</p>
<p>15時になると 眠い。</p>

になります。ふむ。

ついでに、yeomanで自動でコンパイルするようにしてみようと思います。

jade ⇒　html

Yeomanの中にgruntが入っていて、gruntでファイルの変更を監視してくれるかつ、編集したファイルを自動でコンパイルしてくれます。

Yeomanには、yo grunt bowerが入っています。

yo ひな形作成ツール
grunt-cli ビルドツール
bower ライブラリ管理ツール

一式インストールしてみましょう。

Node.js command prompt開く。
yeoman(yoとgruntとbower)一式をインストール。

npm install -g yo grunt-cli bower

インストールされているか確認

yo --version

バージョンが表示されればOKです。

ひな形＝　generator とYeomanではいいます。

ひな形形作成もできますが、今回はデフォルトで使えるジェネレータの一つ、webappを使ってみます。
（ generator-webapp : https://github.com/yeoman/generator-webapp ）

※デフォルトで使えるジェネレータのリスト
http://yeoman.io/generators/official.html

npm install -g generator-webapp

インストールしたら、利用したいディレクトリまで行って、

cd (ディレクトリ名)
yo webapp

をすると、ヨ―マンおじさんが出てくるはず。

gruntとタイプすれば、自動的にコンパイルしてくれるようになります。
（閉じないでくださいね。）