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>