相変わらず、grunt-pluginばっかり作っております。
ejsを使って、htmlを構造化して書くためのgrunt-plugin、 grunt-simple-ejs を作ったのでご紹介。
導入
1. ejsテンプレートを用意
「ejs使ったことない!」という方でも、まぁ埋め込みたい変数名を<%= %>で囲めば何とかなります。
置き場所は、自分は src/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: 埋め込む変数の情報(詳しくは後述)
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が生成されます。
<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に直接うめこむ
options: {
hoge: "ほげ",
moge: "もげ"
}
B. jsonで書いて、パスを指定
options: "options.json"
{ "hoge": "ほげ", "moge": "もげ" }
C. yamlで書いて、パスを指定
options: "options.json"
hoge:
ほげ
moge:
もげ
D. jsで書いて、パスを指定
options: "options.js"
module.exports = {
hoge: "ほげ",
moge: "もげ"
};
E. 設定ファイルを複数使う
options: [
"options.default.json",
"options.dev.json"
]
※同じ値を複数のファイルで指定した場合は、後に指定したもので上書きされます
include
ejsなので、もちろんinclude(別のテンプレートの読み込み)もできます。
headerとかfooterを別ファイルに分けておくといい感じでしょう。
<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 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のファイルにまとめておくことができます。
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からその部分を探して変更したり、
その過程で余計なところを消しちゃってあわあわ、みたいなこともなくなります。
部分テンプレートは共有できる
共通部分としてテンプレートを分けられるのは、
なにもそのサイトで使うだけのコンポーネントでなくてもよいです。
いいね! ボタンやツイートボタンをテンプレートにしておけば、
毎度のプロジェクトで使えるし、他の人とも共有できます。
みんなでこのテンプレートの仕組みを使って、
みんなが部分テンプレートを作って、
どんどんみんなが楽になる、
みたいな流れになると楽しいなぁと思ってます。
まとめ
みんなで使って、みんなで楽したい。