Browsersync で SSI を使う (rewriteRules編)

Browsersync で SSI したい

Browsersync で SSI を使いたい場合、ちょっと調べると browsersync-ssi などのパッケージを middleware として使う方法がよく出てきます。

ただ、すでに他の middleware を導入しており、バッティングしてすんなり動かない……というケースがありましたので、別の方法で SSI を動かしてみたメモです。

rewriteRules を使う

Browsersync の rewriteRules オプションで、html の中身を自由に書き換えられる模様。
ということで SSI の仕組みをそこに埋め込みます。

ざっくりこんな感じ

const browserSync = require('browser-sync');
const fs = require('fs');
const path = require('path');

browserSync.init({
    server: 'public',
    files: 'public/**/*',
    rewriteRules: [
        {
            match: /<!--#include virtual="(.+)" -->/g,
            fn: function (req, res, match, filename) {
                const filePath = path.join(__dirname, 'public', filename);
                if (! fs.existsSync(filePath)) {
                    return `<span style="color: red">${filename} could not be found</span>`;
                }
                return fs.readFileSync(filePath);
            }
        }
    ],
});

ゴリゴリ感はありますが、動いた。

参考

• BrowserSync/recipes
  • https://github.com/BrowserSync/recipes/tree/master/recipes/server.includes