gulp-twig を使用して node.jsでphpと同じTwigテンプレートを使用する

● node.jsでphpと同じTwigテンプレートを使用する

システムの開発がphpかつテンプレートエンジンTwigを使用する場合
デザイン過程で静的なhtmlを作成する場合にもTwigを使用しておくとプログラムへのテンプレート化する時に
作業を省くことができます

実はGulpにはPHPと同じTwigテンプレートがあるのでこちらを使用します。
node.js とgulp はあらかじめインストールしておきます。

● gulp でTwig を扱うgulp-twigをインストールする

npm install  gulp-twig  --save-dev

● gulp-twigでコンパイルするための設定を gulpfile.js に作成する

以下の仕様でコンパイルするよう設定を記述します

● ./twig/ ディレクトリ以下の全ての html ファイルをTwigテンプレートを使用してコンパイルし、./www/ ディレクトリ内に生成する。
● アンダースコアで始まるファイルはコンパイルしない。

gulpfile.js 以下のとおり作成する

// twig コンパイル設定
var gulp   = require('gulp');
var twig   = require('gulp-twig');
var rename = require('gulp-rename');
gulp.task('twig', function () {
    'use strict';
    gulp.src(['./twig/*.html', './twig/*/*.html', '!./twig/_*.html'])
    .pipe( twig({}) )
    .pipe(gulp.dest('./www/'));
});

● gulp-twig によるコンパイルの実行

gulp twig

● テンプレートファイル内で書き出される html のファイル名を取得する

テンプレートファイル内に以下のように記述します

・gulp-twigの場合

{{ _target.relative }}

・PHP twigの場合

{{  _self.getTemplateName().__toString }}

● テンプレート例(レイアウトとそれを継承するテンプレート)

_layout.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<header></header>
<div class="container">
	{% block content %}{% endblock %}
</div>
<footer></footer>
</body>
</html>
<!-- {{ template_filename }} -->

index.htm

{# 継承元 #}
{% extends "_layout.htm" %}

{# ファイル名 #}
{% if _self.getTemplateName() %}
	{% set template_filename = _self.getTemplateName().__toString %}
{% else %}
	{% set template_filename = _target.relative %}
{% endif %}

{# ページタイトル #}
{% set title = 'ユーザー管理・データ編集の完了' %}
{% block title %}{{ title }}{% endblock %}

{# コンテンツ #}
{% block content %}
<!-- ここにコンテンツを記述します -->
...
...
...
<!-- ここにコンテンツを記述します -->
{% endblock %}

上の2つのファイルを用意して test.htm を gulp-twig でコンパイルすると次のようなファイルが生成されます。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ユーザー管理・データ編集の完了</title>
</head>
<body>
<header></header>
<div class="container">
	<!-- ここにコンテンツを記述します -->
...
...
...
<!-- ここにコンテンツを記述します -->
</div>
<footer></footer>
</body>
</html>
<!-- test.html -->

関連エントリー

No.1119
04/14 22:20

edit

Twig