grunt

grunt-ectのまとめ

More than 1 year has passed since last update.

npm init


  • package.jsonができる
    npm initは対話形式でprojectの初期設定を行うためのcommand。
    実行すると対話形式で項目を入力して、package.jsonを作成する。

npm install

npm install grunt --save-dev

npm install grunt-ect --save-dev
npm install grunt-contrib-watch --save-dev


package.json

{

"name": "etc_test",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-ect": "~0.1.2",
"grunt-contrib-watch": "~0.6.1"
}
}


Gruntfile.jsの基本型

module.exports = function(grunt) {

grunt.initConfig({
  //設定を記述

});
//モジュールを読み込む(例)
grunt.loadNpmTasks('grunt-ect');
grunt.loadNpmTasks('grunt-contrib-watch');

//タスクを追記(例)
grunt.registerTask('default', ['cssmin', 'watch']);
};

grunt ect


Options


Original Renderer Options


  • root —
    ここで指定した位置がectファイルのルートになる位置となる。

  • object containing templates

  • ext — コンパイル後の拡張子

  • open — Open tag, defaulting to <%

  • close — Closing tag, defaulting to %>


Added grunt-ect Options


  • variables — Data passed to template

  • separator — 連結ファイルは、この文字列に結合されます

  • defaulting to linefeed


Gruntfile.jsの雛形1


Gruntfile.js

'use strict';

module.exports = function(grunt)
{
 //変数設定
var ROOT_PATH = '.',
PROJECT_PATH = ROOT_PATH + '/htdocs/',
ASSET_TEMPLATE_PATH = ROOT_PATH + '/dev/';

//設定
grunt.config.init({

ect: {
top: {
options: {
root: ASSET_TEMPLATE_PATH
},//options

src: 'index.ect',
dest: PROJECT_PATH + 'index.html',
variables: {
id: 'top',
title: 'この文字が入ります'
} //variables
}//top
}//ect

});
//モジュールを読み込む
grunt.loadNpmTasks('grunt-ect');

//タスクを記述する(defaultの場合)
grunt.registerTask('default', ['ect']);
};



index.ect


index.ect

<html>

<body>
 <h1><%- @title %></h1>
</body>
</html>


実行

grunt


基本


  • エスケープ処理をせずに出力する

<%- @key %>


  • エスケープ処理をして出力する

<%= @key %>


継承


  • 親テンプレート側に書く。子テンプレートで上書きするプレースホルダになる。

<% content %>


  • 子テンプレート側から extend で継承する親テンプレートのファイル名を指定する。

    <% extend 'example.ect' %>



インクルード


  • インクルードしたいファイル名を指定する

<% include 'example.ect' %>