はじめに
少し使う必要があったのでjadeを勉強しました。
今回は記法的なものよりは導入についてのメモ。
以下のREADMEが非常に参考になったのでそれになぞらえてます。
https://github.com/arcoplus/tech_seeds_spread_none/tree/mvvm_prototype
jade sample
また、この記事用にgruntでjade実行するサンプルを用意しました https://github.com/tweeeety/jade-sample-with-grunt
ながれ
1. jadeについて
jadeとは
node.jsやExpressで使用できる記述がシンプルなJST(JavaScript Templates )。
Haml に影響を受けた JavaScript テンプレートエンジンであり、
Jadeの最大の特徴はHTMLを簡単に完結にかけることである。
jadeの特徴
jadeのメリット
- サーバー実装に依存せずローカルで確認ができる
- インクルードパーツの文字列にも変数が使用できる
- テンプレートの管理・流用がすぐれている
- extend(継承)
- block(置換継承)
- append(追加継承)
- prepend(追加継承)
- include(包含)
jadeサンプル
jadeの雰囲気を味わうために最初にサンプルを載せておきます。
記法は解説はしません。こんな感じかー的なものが伝わればOK.
htmlでこんな感じだと
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jadeのサンプルだよ</title> </head> <body> <h1>jade sample!</h1> <p>まずはどんな感じか見てみよう</p> <script src="./js/sample.js" charset="UTF-8"></script> </body> </html>
jadeでこんな感じ
doctype html
html
head
meta(charset='UTF-8')
title jadeのサンプルだよ
body
h1 jade sample!
p まずはどんな感じか見てみよう
script(src='./js/sample.js', charset='UTF-8')
だいぶすっきり書けます！
2. jade使って見る
grunt-cliインストール
grunt-cliはコマンドラインでgruntを利用するためのツール群です。
$ npm install -g grunt-cli
grunt-cliを入れるためにはnode.jsやhomebrewを入れておく必要がありますが、
そのあたりの詳細はこちらを参考にしてみてください。
→【grunt】Gruntを使うまでのシンプルメモ - node、npmからのgruntでjavascriptメモ(やcss)ファイルの変更監視と自動minifyしてみる
sampleのclone
ここで使うサンプルはgithub上にあげてるので試したい場合は適宜cloneしてください。
$ git clone git@github.com:tweeeety/jade-sample-with-grunt.git
packageの初期化(npm install)
npm installコマンドでpackageを初期化します
$ npm install
packageのディレクトリ構成
npm installをするとこんな感じに展開されます
$ tree . ├── Gruntfile.js ├── README.md ├── dist ├── node_modules │ ├── coffee-script │ ├── grunt │ ├── grunt-contrib-clean │ ├── grunt-contrib-connect │ ├── grunt-contrib-copy │ ├── grunt-contrib-jade │ ├── grunt-contrib-livereload │ └── grunt-regarde ├── package.json └── src
package.jsonとGruntfile.js
package.json
package.jsonでパッケージの管理をしますが、今回はこんな感じにしてみました。
Gruntfile.js
Gruntfile.jsでタスク管理をしますが、Gruntfile.jsはこんな感じ。
参考サイトはcoffeeですが、今回はなるべくシンプルにしたかったのでjsにした上でいくつかタスクを減らしています。
jade使ってみる
cleanする
参考サイトになぞらえますが、最初にgrunt cleanコマンドを使ってみます。
このタスクは所定のディレクトリを削除します。今回はdistディレクトリが削除されます。
$ grunt clean
見てみる
※ distディレクトリが削除されている $ ls -al drwxr-xr-x 14 tweeeety tweeeety 476 3 16 02:37 .git -rw-r--r-- 1 tweeeety tweeeety 1417 3 16 02:34 Gruntfile.js -rw-r--r-- 1 tweeeety tweeeety 56 3 16 00:45 README.md drwxr-xr-x 11 tweeeety tweeeety 374 3 16 01:17 node_modules -rw-r--r-- 1 tweeeety tweeeety 660 3 16 02:49 package.json drwxr-xr-x 3 tweeeety tweeeety 102 3 16 03:01 src
gruntでjade実行
gruntコマンドでjadeを実行してみます。
$ grunt
ポイント
Gruntfile.jsの通り、今回はgruntコマンドで下記のタスクが実行されます。
のちほどextendの説明をしたら書くかもしれませんが、
src の中の _ から始まる *.jade ファイルは dist にコピーされません。
確認
コンパイルされた確認
ディレクトリを除いてみると、grunt cleanコマンドで削除したdistディレクトリが作成されているのがわかるかと思います。
また、distディレクトリの中にはinde.jadeがコンパイルされて作成されたindex.htmlができています。
$ ls -al
drwxr-xr-x 14 tweeeety tweeeety 476 3 16 02:37 .git
-rw-r--r-- 1 tweeeety tweeeety 1417 3 16 02:34 Gruntfile.js
-rw-r--r-- 1 tweeeety tweeeety 56 3 16 00:45 README.md
drwxr-xr-x 3 tweeeety tweeeety 102 3 16 01:20 dist
drwxr-xr-x 11 tweeeety tweeeety 374 3 16 01:17 node_modules
-rw-r--r-- 1 tweeeety tweeeety 660 3 16 02:49 package.json
drwxr-xr-x 3 tweeeety tweeeety 102 3 16 03:01 src
$ cat dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jade sample</title>
</head>
<body>
<h1>jade sample!!</h1>
<p>this is jade sample with grunt</p>
<script src="./js/sampole.js" charset="UTF-8"></script>
</body>
ブラウザでの確認
connectでwebサーバを起動したので、
ブラウザでhttp://localhost:8000/と打って確認します。
まとめ
jadeの細かい記法は触れませんでした。
gruntで動かすまでの手順メモと、コンパイルして動かす感じが伝わればなー的なメモでした！
enjoy!
