ectを使ってexpress開発することが多いけどexpressジェネレーターでectテンプレートの生成が直接出来ないのでひな形を用意しました。(割と自分用)

こうするといい! とかプルリクとか貰えると喜びます。使い方はreadme or ↓に書いてあります。
ectを最初から使いたいけど若干めんどいって思ってる人向けですね。

経緯など

expressコマンドでひな形作る時にectオプションが無い問題

公式wikiでオプションを見るとectは無いみたいです。
なので、とりあえずectテンプレートでひな形を作ってからectに変更します。

ect

この記事や公式ページを見ると分かるけど、他のテンプレートエンジンに比べて爆速かつ、書き方もejsとほぼほぼ変わらないのでオススメです。

express4

3系からバージョンアップして結構構成が変わってるイメージ
3系からデフォルトのテンプレートエンジンはjade
2系のときはejsだった気がする
↑のリンクではいづれもexpress3系 (やってみたら4系でも3系でも導入手順は同じだったけど←)

使い方

基本的にcloneしてnpm installするいつもの流れです。

任意ですが、packege.jsonとbin/wwwにex4ectの名前が残ってるところを任意のアプリ名に変更した方が良いとも思います。

$ git clone git@github.com:n0bisuke/ex4ect.git
$ cd ex4ect

$ vim package.json
L2 "name": "ex4ect",
↓
L2 "name": "myappname",

$ vim .bin/www

L2 var debug = require('debug')('ex4ect');
↓
L2 var debug = require('debug')('myappname');

$ npm install

$ DEBUG=myappname ./bin/www
  myappname Express server listening on port 4444 +0ms

おまけ実際に作業した手順

すぐ使いたい人は読み飛ばしましょう。

app.jsの変更

express4ひな形作成

$ express -e test
$ cd test
$ npm install
$ npm install ect --save
$ npm uninstall ejs --save

2行追加

var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext : '.ect' });

2行編集

app.engine('ect', ectRenderer.render);
app.set('view engine', 'ect');

まとめるとこんな感じに

app.js

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var ECT = require('ect'); //追加
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext : '.ect' }); //追加

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
// app.set('views', path.join(__dirname, 'views')); 削除
// app.set('view engine', 'ejs'); 削除
app.engine('ect', ectRenderer.render);
app.set('view engine', 'ect');
/*... 以下省略*/

ビューファイル変更

下準備

views/error.ejs
views/index.ejs

という二つのファイルがデフォルトで出来てると思います。

viwes/error.ect
viwes/index.ect

に拡張子変更します。
更に共通レイアウトを分離するためにlayout.ectというファイルも新規で作りましょう。

views/layout.ect

ファイルを編集

ejsでは<%= title %>という形でしたが、ectでは@を変数に付けて、<%= @title %>という形になります。

index.ect

<% extend 'layout' %>
<h1><%= @title %><h1>
<p>Welcome to <%= @title %> by ECT</p>

layout.ect

<!DOCTYPE html>
<html>
  <head>
    <title>Express4 + ECT</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <% content %>
  </body>
</html>

error.ect

<h1><%= @message %></h1>
<h2><%= @error.status %></h2>
<pre><%= @error.stack %></pre>

爆速テンプレートエンジンなECT ＆ express4をよく使うのでひな形をGithub公開してみた。