jadeとは

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

下の左側がjadeです。

http://jade-lang.com/
https://github.com/visionmedia/jade#readme
(本家)

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

インストールの仕方

黒い画面ひらいて、

npm install -g jade
jade --version

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

jadeでコードをかく

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

変数が使える

変数を宣言：

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

変数の展開：

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

jade：

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

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

↓

html

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

になります。ふむ。

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

Yeomanでビルドしてみる

jade ⇒　html

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

Yeomanインストール

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とタイプすれば、自動的にコンパイルしてくれるようになります。
（閉じないでくださいね。）

関連