Express 3.xのjadeでHTMLをpretty出力する

Node.js

結論

先に書くと、ここに答えがある。
node.js - How to output pretty html in Express? - Stack Overflow

問題

現時点での最新express@3.0.0rc5+jade@0.27.6でjadeをレンダリングすると、改行やインデントされずにHTMLが吐き出される。

$ express hoge

   create : hoge
   create : hoge/package.json
   create : hoge/app.js
   create : hoge/public
   create : hoge/public/javascripts
   create : hoge/public/images
   create : hoge/public/stylesheets
   create : hoge/public/stylesheets/style.css
   create : hoge/routes
   create : hoge/routes/index.js
   create : hoge/routes/user.js
   create : hoge/views
   create : hoge/views/layout.jade
   create : hoge/views/index.jade

   install dependencies:
     $ cd hoge && npm install

   run the app:
     $ node app

$ cd hoge && npm install
$ node app &
Express server listening on port 3000
$ curl localhost:3000
GET / 200 24ms - 170
<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body><h1>Express</h1><p>Welcome to Express</p></body></html>

これはこれで問題ないのだけど、開発中とかちゃんと想定通りのHTMLが出力されているのか確かめづらいし、改行やインデントを含んだ出力になってくれると嬉しい。

解決策

jadeはcompile時にprettyというオプションを渡してやることで出力を整形してくれるようになるらしい。
pug/Readme.md at 0.27.6 · pugjs/pug · GitHub

expressのview engineとしてjadeを使っている場合は、例えばrenderメソッドの第2引数に渡すことでそういったオプションを指定することができるようだ。

--- a/routes/index.js
+++ b/routes/index.js
@@ -4,5 +4,5 @@
  */

 exports.index = function(req, res){
-  res.render('index', { title: 'Express' });
+  res.render('index', { title: 'Express', pretty: true });
 };

これで下記のように見やすくインデントされた形式でHTMLがレンダリングされる。

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
  </body>
</html>

とはいえ毎回のrenderメソッドにこれを指定するのは面倒。アプリケーション共通の変数を保持するために、Express 3.xではapp.localsというものが使えるらしい。
Redirecting…
これを使ってセットしておくことで、いちいちrenderメソッドの第2引数にオプションを渡す必要がなくなる。

--- a/app.js
+++ b/app.js
@@ -15,6 +15,7 @@ app.configure(function(){
   app.set('port', process.env.PORT || 3000);
   app.set('views', __dirname + '/views');
   app.set('view engine', 'jade');
+  app.locals.pretty = true;
   app.use(express.favicon());
   app.use(express.logger('dev'));
   app.use(express.bodyParser());

Express 2.xではview optionsという設定項目があったようだけど、3.xではapp.localsを使いましょう、ということのようだ。
Migrating from 2.x to 3.x · expressjs/express Wiki · GitHub