search
LoginSignup
14

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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

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

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

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

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

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
14