【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ(1) ~導入

【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ(1) ~導入

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

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

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

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 -->

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

$ gulp html-extend

htdocs 直下に、先ほど作成した内容で index.html が作成されていることが確認できます。

今回のサンプルデータ

まとめ

今回はここまでです。HTMLテンプレートエンジンを案件に合わせてうまく使いこなせば、ページの量産やPC/スマホサイトを分けて制作する必要がある場合などで活躍すること間違いなしです。興味がある方は是非つかってみてくださいね。次回は、今回のサンプルの解説及び簡単なページの横展開の方法をメモします。

にしても、大岩を動かすシーンは凄かった・・・。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ