【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ（１）　～導入

gulp

2015.09.08

みなさま、こんにちは。時間があってもなくても、家にいるときは hulu でドラマやアニメ、映画を見て過ごしている kouraku です。最近『進撃の巨人』の配信が始まったので、この週末から見始めました。実は初めて見るので、これからどんな展開をしていくのかがすごく楽しみです。

さて、割とページ数の多いサイトを作る時は HTMLテンプレートエンジンを使うと便利ですよね。jade は使いやすいですが、使ったことがない人には敷居が高い、ECTも出た当初は使い勝手が良さそうでしたが１年以上開発が止まっている。そこで、できることは限られているけれど、初心者でも割と使いやすい（と思います）「gulp-html-extend」の使い方についてメモメモ。

※前回までの記事を元に進めていきます。

【gulp】タスクを外に出してgulpfile内をスッキリさせる方法をメモメモ

gulp-html-extend のインストール

それでは早速、gulp-html-extend をインストールします。

$ npm install gulp-html-extend —save-dev

インストールが完了したら、タスクを作りたいと思います。が、その前にディレクトリ構成だけ先に決めちゃいます。

┬ [gulptasks] ─── タスク用ディレクトリ
├ [htdocs]
├ [node_modules] ─── plugins
├ [src] ─── テンプレートエンジン用
｜ └ [extend] ─── html-extend用
｜ 　 ├ [common] ─── 共通パーツ用
｜ 　 ├ [layout] ─── レイアウト用
｜ 　 └ [modules] ─── ページ用
├ gulpconfig.json
├ gulpfile.coffee
├ gulpfile.js
└ package.json

テンプレートエンジン用に新たに「src」ディレクトリを作成し、html-extend用に「extend」を作成しました。さらに、ヘッダー、フッターなど共通パーツを保存する「common」、レイアウト用の「layout」、各ページ用の「modules」も作成します。

前回作成した gulpconfig.json に、テンプレートエンジン用ディレクトリのパス情報を追加しておきましょう。

[gulpconfig.json]

          :
     "paths": {
          "pub": "htdocs/",
          "src": "src/"
     }
}

gulp-html-extend タスクの作成

それでは、タスクを作成します。

[html-extend.coffee]

gulp = require 'gulp'
plugins = prop.plugins
config = prop.config

# ExtendHTML
module.exports = do ->
    gulp.task 'html-extend', ->
        gulp
        .src [
            config.paths.src+'/extend/modules/**/*.html'
        ]
        .pipe plugins.htmlExtend
            annotations: false
            verbose: false
            root: config.paths.src+'/extend'
        .pipe gulp.dest config.paths.pub
        return

こんな感じですね。オプションの設定は、インポートファイルをルートパスから設定できるようにしたいので、

root: config.paths.src+'/extend'

を入れてます。

テンプレートの作成

タスクの準備も整ったので、いよいよテンプレートの作成に入ります。
今回は以下4ファイルを作ります。

レイアウト
/src/extend/layout/layout.html
ヘッダー
/src/extend/common/header.html
フッター
/src/extend/common/footer.html
ページ
/src/extend/modules/index.html

[/layout/layout.html]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>gulp-html-extend テスト</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- @@include /common/header.html -->
<!-- @@placeholder=content -->
<!-- @@include /common/footer.html -->
<!-- SCRIPTS -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
</body>
</html>

[/common/header.html]

<header>
<h1>gulp-html-extend テスト</h1>
</header>

[/common/footer.html]

<footer>
<p>Copyright &copy; C-brains Corporation. all rights reserved.</p>
</footer>

[/modules/index.html]

<!-- @@master /layout/layout.html -->
<!-- @@block content -->
<article>
<header>
<h1>インデックスの見出し</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
</article>
<!-- @@close -->

それでは、早速コンパイルをして動作を確認します。
先ほど作成したタスクを叩いてみます。