Synthでejsを使う - shimada-kの日記

Synthでテンプレートエンジンにejsを使用する時のメモ。Synthのバージョンは0.5.2です。

back/node_modules/synth/synth.jsに追記

back/package.jsonにejsの項目を追記してsynth install -bを実行します。その後、back/node_modules/synth/synth.jsにejsを使うように変更します。

/* the main synth init function */
exports = module.exports = function (options) {
  options = options || {};
  var defaultResourceDir = path.join(process.cwd(), 'back/resources');
  var viewDir = options.viewDir || path.join(process.cwd(), 'front');
  //var viewEngine = options.viewEngine || 'jade';
  var viewEngine = options.viewEngine || 'ejs';

front/index.ejsを作成

index.jadeがレンダリングした結果をもとに勝手にejs化しました。

<!DOCTYPE html>
<html ng-app="my_app">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= appName %></title>
        <% for(var i = 0; i < cssFiles.length; i++){ %>
            <link rel="stylesheet" href=<%= cssFiles[i] %>>
        <% } %>

        <!-- Preloaded Data-->
        <script>
            var preloadedData = <%- data %>;
        </script>

        <% for(var i = 0; i < jsFiles.length; i++){ %>
            <script type="text/javascript" src="<%= jsFiles[i] %>"></script>
        <% } %>
    </head>
    <body>
        <h1><%= appName %></h1>
        <div ng-view>
            <% if(preloadHTML){ %>
                <script type='text/ng-template', id=<%= preloadHTMLPath %>>
            <% } %>
        </div>
    </body>
</html>

node_modules/synth/lib/frontendRenderer.jsの改修

front/index.ejsとfront/html/hoge/getIndex.ejsを読みに行くようにコードを書きます。まずはejsをrequireしましょう。

var path = require('path'),
    Promise = require('bluebird'),
    fs = Promise.promisifyAll( require('fs') ),
    jade = require('jade'),
    ejs = require('ejs'),
    assets = require('./assets.js');

64行目付近に拡張子を置換してjadeファイルを読みに行っている場所があるので、ejsに置換するコードを追加し、さらにejs.renderFileを使ってejsファイルを読んであげるようにします。

var readHTML = function (path) {
  var production = process.env.NODE_ENV == 'production';
  return fs.readFileAsync(path).error(function (err) {
    if (err.cause.code == 'ENOENT') {
      // Couldn't find the HTML version, how about jade?
      ejs.renderFile(path.replace(/\.html$/, '.ejs'), {}, function(err, result) {
        if(!err){
            console.log(result);
        }
        else{
            console.log(err);
        }
      });
      //return jade.renderFile( path.replace(/\.html$/, '.jade'), {
      //  pretty: !production
      //});
    } else throw err;
  })
  .catch(function (err) {
    if (err.code != 'ENOENT') throw err;
    return null;
  });
};

front/html/tweets/getIndex.ejs追加

frontendRenderer.jsを書き換えてもファイルを作らないと読んでもらえないのでファイルを作りましょう。これもindex.ejsと同様にjadeでレンダリングされたあとのHTMLを参考にejs化しました。

<ul class="tweet-timeline">
  <li ng-repeat="tweet in tweets" class="tweet">
    <div class="content">{{ tweet.content}}</div>
    <div class="date">{{ tweet.created_at | date:'medium' }}</div>
  </li>
</ul>

以上です。あとはsynth sしてlocalhost:3000/tweetsにアクセスすればデフォルトのjade版と変わらない形でレンダリングされるはず。