ECT て何？

ECT 曰く、最速の JavaScript テンプレートエンジンらしいです。

• ECT - Fastest JavaScript template engine with CoffeeScript syntax

EJS と一緒で、JS でゴニョゴニョして HTML を楽して書いちゃおう！ということができます。わたしの場合は、主にスタティックな HTML を書くときに使っていますが、同僚は JS を書くときにも使っているみたい。

ECT の特徴は、CoffeeScript のシンタックスで書くことができることやブロックが扱えること、ヘルパーとしてオリジナルの関数を渡すことができることなどでしょうか。あとは・・・やっぱり最速らしい。

grunt-ect をインストールする

ターミナルで下記を実行して grunt-ect をインストールします。

$ npm install grunt-ect --save-dev

--save-dev はお好みで。

Gruntfile.js にコンパイルの設定を記述する

Gruntfile.js コンパイルに関わる設定をいろいろ書きます。設定できる内容は下記リンク先を参考に。

• grunt-ect

シンプルな例

下記は、index.ect を /index.html、about.ect を /about/index.html にコンパイルする場合の書き方。ターミナルで $ grunt ect を実行すればコンパイルできます。

ECT のテンプレートファイルの拡張子は .ect でなくても大丈夫です。拡張子が無くても動きます。

'use strict';
module.exports = function(grunt)
{

  // -----------------------------------
  //  Variables
  // -----------------------------------

  var ROOT_PATH           = '.'
   , PROJECT_PATH        = ROOT_PATH + '/htdocs'
   , ASSET_TEMPLATE_PATH = ROOT_PATH + '/assets/template'
    ;

  // -----------------------------------
  //  Options
  // -----------------------------------

  grunt.config.init({

    ect: {
      top: {
        options: {
          root: ASSET_TEMPLATE_PATH
        }
     , src: 'index.ect' // コンパイル元
     , dest: PROJECT_PATH + '/index.html' // コンパイル後
     , variables: { // ここで好きなようにオブジェクトを作っておく
          title: 'Document Title'
       , id: 'top'
       , lang: 'ja'
        }
      }
   , about: {
        options: {
          root: ASSET_TEMPLATE_PATH
        }
     , src: 'about.ect' // コンパイル元
     , dest: PROJECT_PATH + '/about/index.html' // コンパイル後
     , variables: { // ここで好きなようにオブジェクトを作っておく
          title: 'Document Title'
       , id: 'about'
       , lang: 'ja'
        }
      }
    }

  });

  // -----------------------------------
  //  Plugins
  // -----------------------------------

  grunt.loadNpmTasks('grunt-ect');

};