相変わらず、grunt-pluginばっかり作っております。
ejsを使って、htmlを構造化して書くためのgrunt-plugin、 grunt-simple-ejs を作ったのでご紹介。

導入

1. ejsテンプレートを用意

「ejs使ったことない!」という方でも、まぁ埋め込みたい変数名を<%= %>で囲めば何とかなります。
置き場所は、自分は src/ejs とかにしてます。

src/ejs/index.html.ejs

<html>
<head>
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body>
<h1><%= title %></h1>
<p><%= description %></p>
</body>
</html>

2. grunt-simple-ejsをインストール

npm install grunt-simple-ejs --save-dev

3. Gruntfileを編集

grunt-simple-ejsが持っているconfigは、いまのところ3つだけです。

template: 使用するejsテンプレートの場所 (include用のテンプレートは、ここに含まなくてもよいです)
dest: コンパイルしたhtmlの出力先
options: 埋め込む変数の情報(詳しくは後述)

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        ejs: {
           dev: {
               template: [ 'src/ejs/*.ejs' ],
               dest: './',
               options: {
                   title: 'サンプルサイト',
                   description: 'サンプルであって特に意味は無い'
               }
           }
        }
    });

    grunt.loadNpmTasks('grunt-simple-ejs');
};

4. build実行

grunt ejs:dev

これで、こんなかんじのindex.htmlが生成されます。

index.html.ejs

<html>
<head>
<title>サンプルサイト</title>
<meta name="description" content="サンプルであって特に意味は無い" />
</head>
<body>
<h1>サンプルサイト</h1>
<p>サンプルであって特に意味は無い</p>
</body>
</html>

ちゃんと、Gruntfileで設定したtitleが<%= title %>に、
descriptionが<%= description %>に置き換わってます。

optionsの書き方

optionsは、けっこういろいろな書き方ができるようになっています。

A. Gruntfileに直接うめこむ

Gruntfile.js

options: {
  hoge: "ほげ",
  moge: "もげ"
}

B. jsonで書いて、パスを指定

Gruntfile.js

options: "options.json"

options.json

{ "hoge": "ほげ", "moge": "もげ" }

C. yamlで書いて、パスを指定

Gruntfile.js

options: "options.json"

options.yaml

hoge:
  ほげ
moge:
  もげ

D. jsで書いて、パスを指定

Gruntfile.js

options: "options.js"

options.js

module.exports = {
  hoge: "ほげ",
  moge: "もげ"
};

E. 設定ファイルを複数使う

Gruntfile.js

options: [
  "options.default.json",
  "options.dev.json"
]

※同じ値を複数のファイルで指定した場合は、後に指定したもので上書きされます

include

ejsなので、もちろんinclude(別のテンプレートの読み込み)もできます。
headerとかfooterを別ファイルに分けておくといい感じでしょう。

index.html.ejs

<html>
<head>
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body>
<% include header %>
<main>
<h1><%= title %></h1>
<p><%= description %></p>
</main>
</body>
</html>

header.ejs

<header id="gheader">
<h1>うぇぶさいと</h1>
<nav id="gnav">
<ul>
<li><a href="/top">top</a></li>
<li><a href="/about">about</a></li>
<li><a href="/news">news</a></li>
</ul>
</nav>
<!-- /#gheader --></header>

コンポーネント化されたhtml

さて、わざわざテンプレートでhtmlを書くと、
どういういいことがあるでしょうか。

共通部分を何度も書かなくて済む

ヘッダやフッダ、あるいはサイト中で何度も出てくるboxなど、
cssはSassを使って共通化されてきているかなぁと思います。

それと同じことが、htmlでもできるようになります。
同じパーツを何度も書く手間が減り、修正も簡単になります。

パラメーター修正が楽になる

たとえばdescriptionやogpの文言など、
ちまちましていて扱いづらいコンテンツを、optionsのファイルにまとめておくことができます。

options.js

var url_root = "http://example.com/",
    title = "サンプルWebサイト!!!!",
    description = "このWebサイトの説明";

module.exports = {
  title: title,
  description: description,
  favicon_url: url + "favicon.ico",
  ogp_title: title,
  ogp_description: description,
  ogp_image_url: url + "img/ogp.png"
};

これで、このあたりの文言に変更があったときも、
たくさんあるhtmlからその部分を探して変更したり、
その過程で余計なところを消しちゃってあわあわ、みたいなこともなくなります。

部分テンプレートは共有できる

共通部分としてテンプレートを分けられるのは、
なにもそのサイトで使うだけのコンポーネントでなくてもよいです。

いいね! ボタンやツイートボタンをテンプレートにしておけば、
毎度のプロジェクトで使えるし、他の人とも共有できます。

みんなでこのテンプレートの仕組みを使って、
みんなが部分テンプレートを作って、
どんどんみんなが楽になる、
みたいな流れになると楽しいなぁと思ってます。

まとめ

みんなで使って、みんなで楽したい。