gulpでTwigレンダリングをなんとかしてみた話

追記・更新情報

2019/09/10： gulp4.x系で動くよう修正

まとめ

テンプレートエンジンとしてTwig（をサーバサイドレンダリングする）案件が発生したけれど、
gulpで何とかできないの……？ということで、やってみた手順です。

それらしい情報がなかなか見当たらなかったのですが、
まあbrowser-sync使うにしてもローカルにXMAPP環境作ってproxyした方が早いよねって話ですかね……。
普段PHP触らないコーダーさんに環境をバラ撒く想定だったので、
フロントエンドな人の導入障壁の低そうなgulpで何とかしてみましたよー、というお話。

もろもろ構築済みのものがこちらです。
twig-template

いるもの

packages.json貼った方が早いすね。

packages.json

{
  "dependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-twig": "^0.7.0"
  }
}

gulpまわりの動作など

ざっくり言うと

• gulp-twigでHTMLを生成
• それをbrowser-syncでリアルタイムプレビューする

という感じです。
下記は説明のためにザックリ抜き出しな感じですが、
必要に応じてsassなりbabelなんなりを追加すればよろしいかと。

gulpfile.js

'use strict';
// settings
const $dist = './dist/';
const $twigSrc = ['./src/twig/**/*.twig'];
const $twigSrc_exclude = ['!./src/twig/**/_*.twig'];
// プレビュー表示用HTMLの生成先
const $htmlRoot = '__html/';

// import common packages
const gulp = require('gulp');
const plumber = require('gulp-plumber');

// twigをコンパイルする
gulp.task('twig', () => {
	const twig = require('gulp-twig');
	const _twigSrc = $twigSrc.concat($twigSrc_exclude);
	const _htmlRoot = $htmlRoot.replace(/\/$/, '');
	const _htmlDist = $dist + _htmlRoot;
	gulp.src(_twigSrc)
	.pipe(plumber())
	.pipe(twig({
		data: $twig_output_data,
		base: $twigBase
	}))
	.pipe(gulp.dest(_htmlDist));

	// twigテンプレートをdistへコピー
	// gulp 4.xではreturn valueが必要なのでひとまずreturnしておく
	return gulp.src($twigSrc).pipe(gulp.dest($dist));
});

gulp.task('server', () => {
	const browserSync = require('browser-sync');
	const _htmlRoot = '/' + $htmlRoot;
	browserSync({
		server: {
			baseDir: $dist,
			directory: false
		},
		middleware: (req, res, next) => {
			if (req.url.match(/\/$/)) {
				req.url = _htmlRoot + req.url.match(/(.*)\/$/)[1] + '/';
			} else if (req.url.match(/html?$/)) {
				req.url = _htmlRoot + req.url;
			}
			return next();
		}
	});

	gulp.watch(`${$dist}**/*.html`).on('change', browserSync.reload);
});

gulp.task('watch', () => {
	gulp.watch($twigSrc, gulp.series(['twig']));
});
gulp.task('default', gulp.parallel('server', 'watch'));

使ってみて

客先の環境のパスが想定と違っていたりで、案件ではちょいとトラブったりしたのですが、
基本的にはこれで問題なしでした。