grunt-simple-ejs作ったので使ってほしい


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

* [fnobi/grunt-simple-ejs](https://github.com/fnobi/grunt-simple-ejs)
* [grunt-simple-ejs](https://npmjs.org/package/grunt-simple-ejs)


## 導入

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

```html: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をインストール

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

### 3. Gruntfileを編集

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

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

```javascript: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実行
```bash
grunt ejs:dev
```
これで、こんなかんじのindex.htmlが生成されます。

```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に直接うめこむ

```javascript:Gruntfile.js
options: {
  hoge: "ほげ",
  moge: "もげ"
}
```

### B. jsonで書いて、パスを指定
```javascript:Gruntfile.js
options: "options.json"
```

```json:options.json
{ "hoge": "ほげ", "moge": "もげ" }
```

### C. yamlで書いて、パスを指定
```javascript:Gruntfile.js
options: "options.json"
```

```yaml:options.yaml
hoge:
  ほげ
moge:
  もげ
```

### D. jsで書いて、パスを指定
```javascript:Gruntfile.js
options: "options.js"
```

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

### E. 設定ファイルを複数使う
```javascript:Gruntfile.js
options: [
  "options.default.json",
  "options.dev.json"
]
```
※同じ値を複数のファイルで指定した場合は、後に指定したもので上書きされます


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

```html: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>
```
```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のファイルにまとめておくことができます。

```javascript: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からその部分を探して変更したり、
その過程で余計なところを消しちゃってあわあわ、みたいなこともなくなります。

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

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

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

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

## まとめ
みんなで使って、みんなで楽したい。