Jadeの導入と「gulp-jade」を使ったビルドまで

2015.12.4

Jadeとは

Jadeは、HTMLを効率的に書けるようにするテンプレートエンジンです。
新しい名前ではPugと言います。
前に書いた記事のSlimはRuby製ですが、今回紹介するJadeはJavaScript製です。「Node.js」によって動きます。
Slimと同じく最終的にはHTMLとして出力されます。
今回は導入から「Gulp.js」のプラグイン「gulp-jade」を使用したビルドまでを紹介します。

まずインストール

Jadeはまず「Node.js」が入っていないと動きません。GulpやGruntを使用していれば既にインストールされているはずです。今回Nodeのインストールは省略します。

それではJadeをインストールしていきます。
なお、下記のコマンドはMac用です。

sudo npm install -g jade

Jadeを使ってみる

JadeはSlimと同じく通常のHTMLとは記法が異なります。
拡張子も「.jade」となります。

大まかな違いは下記かと思います。

閉じタグが無い
「<」,「>」がいらない
classは「.」、IDは「#」で記述
改行が「|」になる
インデントがそのまま階層になる
JavaScriptの記法が使える

例えば
Jadeで下記のように記述したとします。

doctype html
html
  head
    meta(charset='utf-8')
    title タイトルです
    link(rel="stylesheet" href="css/style.css")
    script(src="js/index.js")
  body
    h1 見出しです
    h2 次の見出しです
    p
      |テキスト
      br
      |テキストテキストテキストテキスト
    p: a(href="/contact",class="btn",target="_blank") リンク
    p: img(src="images/img.jpg",class="photo")

ビルドすると下記になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>タイトルです</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/index.js"></script>
  </head>
  <body>
    <h1>見出しです</h1>
    <h2>次の見出しです</h2>
    <p>テキスト<br>テキストテキストテキストテキスト</p>
    <p><a href="/contact" target="_blank" class="btn">リンク</a></p>
    <p><img src="images/img.jpg" class="photo"></p>
  </body>
</html>

includeを使う

Jadeではインクルードを使うことができます。
例えば、下記のフォルダ構成の場合

— includes
— index.jade

「includes」フォルダ内には「header.jade」が入っているとします。インクルードするには下記のように記述します。

doctype html
html
  head
    meta(charset='utf-8')
    title タイトルです
    link(rel="stylesheet" href="css/style.css")
    script(src="js/index.js")
  body
    include ./includes/header
    h1 見出しです
    h2 次の見出しです

extendsを使う

Jadeではテンプレートの継承という機能を使うことができます。
これを利用すると、レイアウトの使い回しができて便利です。
例えば、下記のフォルダ構成の場合

— extends
— index.jade

「extends」フォルダの中には、「layout.jade」が入っているとします。
「layout.jade」のテンプレートを継承させて「index.jade」を作ってみましょう。

layout.jade

doctype html
html
  head
    meta(charset="utf-8")
    block title
      title タイトル
    block meta
      meta(name="description", content="説明")
    block link
      link(rel="stylesheet" href="css/style.css")
      script(src="js/index.js")
  body
    block body

index.jade

extends ./extends/layout
block title
  title テスト
block prepend meta
  meta(name="viewport", content="width=device-width, initial-scale=1")
block append link
  link(rel="stylesheet" href="css/index.css")
block body
  p メインコンテンツ

ビルド後は下記になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>テスト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="説明">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <p>メインコンテンツ</p>
  </body>
</html>

「block」という記述で各ファイルの関係を紐づけます。
「index.jade」で「extends ./extends/layout」と記述すれば「layout.jade」を呼び出すことができます。
「block」の記述で、対応した場所を置き換えます。
記述には下記があります。

block	置き換える
block prepend	内容を継承して、その前に追加する。
block append	内容を継承して、その後に追加する。

Jadeでは他にも、javaScriptの記述が使えるので、変数や条件分岐なども使えます。
では「gulp-jade」を使っていきます。

gulp-jadeをインストール

「gulp」までのインストールは終わっている想定で進めます。
下記コマンドで「gulp-jade」をインストールします（Mac）

sudo npm install --save-dev gulp-jade

gulp-jadeを使ってみる

「gulpfile.js」は下記のように記述します。エラーがあった後もファイルの監視を続けるために「gulp-plumber」というプラグインも入れています。

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var jade = require("gulp-jade");
 
gulp.task('jade', function(){
  gulp.src('*.jade')
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest(""));
});
 
gulp.task('default', function() {
  gulp.watch(['*.jade'],[jade']);
});

「pretty」がないとHTMLが圧縮された状態で出力されます。
gulpを実行すると保存するたびに「.jade」ファイルと同じ場所に「.html」ファイルが出力されます。
あとはファイルの監視をしています。

制作用のJadeテンプレート

制作に使えそうなJadeのテンプレートを作ってみました。
あくまでも一例です。
特に分割していないので、使いやすいようにパーツ分けしてみて下さい。

- var Sitename = "sitename"
- var Pageurl = "pageurl.jp/"
- var Title = "Title"
- var Description = "description"
- var Canonicalurl = "canonical"
- var Alternateurl = "alternate"
//- Linktype >>> 1(canonical), 2(alternate), 3(none)
- var Linktype = 1
//- OGPtype >>> 1(website), 2(article)
- var OGPtype = 2

doctype html
html(lang="ja",prefix="og: http://ogp.me/ns#")
  head
    //- canonical or alternate or none
    case Linktype
      when 1
        link(rel="canonical" href= Canonicalurl)
      when 2
        link(rel="alternate" media="only screen and (max-width: 640px)" href= Alternateurl)
    //- for IE
    <!--[if IE]>
    meta(http-equiv='X-UA-Compatible' content='IE=edge')
    <![endif]-->
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    title= Title
    meta(name="description" content= Description)
    //- OGP
    case OGPtype
      when 1
        meta(property="og:type" content="website")
      when 2
        meta(property="og:type" content="article")
    meta(property="og:site_name" content= Sitename)
    meta(property="og:url" content= Pageurl)
    meta(property="og:title" content= Title)
    meta(property="og:description" content= Description)
    meta(property="og:image" content= "#{Pageurl}images/ogp.png")
    meta(property="og:locale" content="ja_JP")
    //- js
    script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js")
    script.
      window.jQuery || document.write('<script src="js/jquery-1.11.3.min.js"><\/script>')
      script(src="js/index.js")
    //- CSS
    link(rel="stylesheet" href="css/style.css")
  body

さいごに

単純に記述量が減るのでフラットなHTMLを書くためだけに利用しても良いかと思います。
現在ではJadeやSlimやHamlなど、様々なテンプレートエンジンがありますが、どれもまず使ってみるのが一番だと思います。その上で自分にあったものを選んでいきましょう。