tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【jade】テンプレートエンジンjadeを使ってみるメモ - 導入編(gruntからのjadeコンパイルでhtml変換)

はじめに

少し使う必要があったので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について
  2. jade使って見る
    • grunt-cliインストール
    • sampleのclone
    • packageの初期化(npm install)
    • package.jsonとGruntfile.js
    • jade使ってみる
      • gruntでjadeタスク実行
      • コンパイルされた確認
      • ブラウザで確認

1. jadeについて

jadeとは

node.jsやExpressで使用できる記述がシンプルなJST(JavaScript Templates )。
Haml に影響を受けた JavaScript テンプレートエンジンであり、
Jadeの最大の特徴はHTMLを簡単に完結にかけることである。

jadeの特徴

  • HTML 要素に閉じタグがない(シンプル)
  • class と id 属性の記法が CSS セレクタの記法と同じ(わかりやすい)
  • インデントが必須(構造化)

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コマンドで下記のタスクが実行されます。

  • jade実行(*.jadeコンパイル)
  • サーバを起動 (connect)
  • srcディレクトリ配下にコンパイルされたhtmlファイルをdistディレクトリにコピー(copy)

のちほど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!