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'));

使ってみて

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