Jadeは、HTML を書くための軽量マークアップ言語であり、JavaScript テンプレートエンジンでもあります。
JadeはnodeのMVCスタックのViewの標準レンダラとして採用されている知名度の高いエンジンです。
その最大の特徴は記法にあります。
なんといっても、タグを閉じない。
class と id 属性の記法が CSS セレクタの記法と同じです。
ただし、注意点として インデントが必須 です。これは厳密です。4spaceでもTabでも構いません。必ず統一性を確保します。
では、nodeがインストールされている前提で、npmでjadeをインストールします。
今回は Windows でやってみます。
$ npm install -g jade
C:\Users\xxx\AppData\Roaming\npm\jade -> C:\Users\xxx\AppData\Roaming\npm\node_modules\jade\bin\jade.js
jade@1.11.0 C:\Users\xxx\AppData\Roaming\npm\node_modules\jade
├── character-parser@1.2.1
├── void-elements@2.0.1
├── commander@2.6.0
├── jstransformer@0.0.2 (is-promise@2.0.0, promise@6.1.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── constantinople@3.0.2 (acorn@2.3.0)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.5)
├── clean-css@3.3.9 (commander@2.8.1, source-map@0.4.4)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
└── uglify-js@2.4.24 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, yargs@3.5.4)
以下のようなファイルを作ります。
index.jade
doctype html
html
head
meta(http-equiv="content-type",content="text/html; chaeset=utf-8")
meta(name="description",content= "コンテンツ")
meta(name="keywords",content= "キーワード群")
meta(http-equiv="imagetoolbar",content="no")
title Jadeのサンプル
body
h1 大見出しです
h2 中見出しです
p Jadeを試してみます。
htmlにコンパイルします。
$ jade index.jade
次のようなhtmlファイルが生成されます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; chaeset=utf-8">
<meta name="description" content="コンテンツ">
<meta name="keywords" content="キーワード群">
<meta http-equiv="imagetoolbar" content="no">
<title>Jadeのサンプル</title>
</head>
<body>
<h1>大見出しです</h1>
<h2>中見出しです</h2>
<p>Jadeを試してみます。</p>
</body>
</html>
どうでしょうか。
案外、簡単だったと思います。
ちょっとしたサンプルを作ろうとか、大量に静的なページを作るといったようなシーンに活躍すると思います。
nodeでMVC + RESTfulを達成するExpressionを使用するには必須です。
興味を持たれた方は、調べて深みにはまるのもいいでしょう。
0 件のコメント :
コメントを投稿