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 のファイル名を取得する

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

{{ _target.relative }}

関連エントリー

No.1119
04/17 10:19

edit

Twig