システムの開発がphpかつテンプレートエンジンTwigを使用する場合
デザイン過程で静的なhtmlを作成する場合にもTwigを使用しておくとプログラムへのテンプレート化する時に
作業を省くことができます
実はGulpにはPHPと同じTwigテンプレートがあるのでこちらを使用します。
node.js とgulp はあらかじめインストールしておきます。
npm install gulp-twig --save-dev
以下の仕様でコンパイルするよう設定を記述します
● ./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
テンプレートファイル内に以下のように記述します
{{ _target.relative }}
{{ _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 -->