[Grunt & Yeoman] grunt-ect テンプレートを使って HTML を生成する
引き続き、テンプレートエンジンについて試してみました。
[markdown]
こちらのエントリーが分かりやすかったので、参考にしながら動かしてみます。
> * [Template Engine: ECT を Grunt でコンパイルする準備 :: log.chocolateboard](http://log.chocolateboard.net/template-engine-ect-grunt-setting/)
> * [Template Engine: ECT の基本的な使い方 （Grunt でコンパイル） :: log.chocolateboard](http://log.chocolateboard.net/template-engine-ect/)
## ect
素の ect。
> * [ECT – Fastest JavaScript template engine with CoffeeScript syntax](http://ectjs.com/)
> * [baryshev/ect](https://github.com/baryshev/ect)
## インストール
“`prettyprinted
% npm install –save-dev grunt-ect
“`
## Gruntfile
> * [grunt-ect](https://npmjs.org/package/grunt-ect)
> * [2no / grunt-ect — Bitbucket](https://bitbucket.org/2no/grunt-ect)
“`
‘use strict’
module.exports = (grunt) ->
# プラグインの読み込み
grunt.loadNpmTasks ‘grunt-ect’
# グラントタスクの設定
grunt.initConfig
# config
dir:
src: ‘src’
dest: ‘dist’
pkg: grunt.file.readJSON “package.json”
# grunt-ect
ect:
options:
root: ‘<%= dir.src %>/template’
index:
src: ‘index.ect’
dest: ‘<%= dir.dest %>/index.html’
variables:
title: ‘タイトル’
description: ‘サイトの説明です。’
news:
src: ‘news/news.ect’
dest: ‘<%= dir.dest %>/news/news.html’
variables:
title: ‘タイトル’
description: ‘サイトの説明です。’
# タスクコマンドの設定
grunt.registerTask ‘default’, [‘ect’]
“`
## つかいかた
“`prettyprinted
src/template
├── index.ect
└── news
└── news.ect
“`
### src/template/index.ect
“`html
Contents
<%= @title %>
<%= @description %>
“`
### src/template/news/news.ect
“`html
<%= @title %>
<%= @description %>
“`
実行します。
“`prettyprinted
% grunt ect
Running “ect:index” (ect) task
File dist/index.html created.
Running “ect:news” (ect) task
File dist/news/news.html created.
Done, without errors.
“`
“`prettyprinted
dist
├── index.html
└── news
└── news.html
“`
## 分からない点
* Gruntfile 内に書いた設定を別ファイルにする方法。
* index, news としたページ毎の設定をせずにまとめて生成できないか。
## テンプレートの継承機能をつかって、親レイアウトファイルを用意する
追記：2014/01/09
まとめてコンパイルする方法が分かったので追記します。
Grunfile 内に書いたオブジェクトの渡し方は分からないけれど、Blocks 機能で ect 内からきれいに渡せそう。
### Gruntfile
これで /src/template 以下の .html.ect ファイルが、ディレクトリ構造を保ったまま、html として生成されました。
“`
ect:
options:
root: ‘<%= dir.src %>/template’
dev:
expand: true,
flatten: false,
cwd: ‘<%= dir.src %>/template’
src: ‘**/*.html.ect’
dest: ‘<%= dir.dest %>‘
ext: ‘.html’
“`
※ テンプレートのパスを整えるため、root の設定が必要でした。
### 継承（Inheritance）とプレースホルダ（Blocks）
こちらを参考に実装していきます。
> * [Template Engine: ECT の基本的な使い方 （Grunt でコンパイル） :: log.chocolateboard](http://log.chocolateboard.net/template-engine-ect/)
このようなファイルレイアウトで用意してみます。
“`prettyprinted
src/template
├── index.html.ect
├── news
│ └── news.html.ect
└── partials
└── layout.ect
“`
layout.ect
“`html
<% content %>
<% content 'scripts' %>
“`
index.html.ect
“`html
<% block 'title': %>
インデックス<% end %>
<% extend 'partials/layout.ect' %>
インデックスの見出し
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?
<% block 'scripts': %>
特定のページだけで使うスクリプトとかを呼び出す。
<% end %>
“`
news.html.ect
“`html
<% block 'title': %>
ニュース<% end %>
<% extend 'partials/layout.ect' %>
ニュースの見出し
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?
“`
## 生成されたファイル
“`
dist
├── index.html
└── news
└── news.html
“`
index.html
“`
インデックスの見出し
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?
特定のページだけで使うスクリプトとかを呼び出す。
“`
news.html
“`
ニュースの見出し
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?
“`
望み通りの出力をすることができました。
[/markdown]