browserSyncでSSIを有効にする

browserSyncでSSIを有効化したいのですがうまくいきません。
解決案をご教授いただけないでしょうか？

試したこと

browsersync-ssiを用いた有効化

bs
1const ssi = require("browsersync-ssi");
2
3const baseDir = "./htdocs";
4
5module.exports = {
6  files: `${baseDir}/**/*`,
7  server: {
8    baseDir: baseDir,
9    index: "index.html"
10  },
11  proxy: false,
12  port: 3000,
13  middleware: ssi({
14    baseDir: baseDir,
15    ext: ".html",
16    version: "1.4.0"
17  })
18};

rewriteRulesを用いた有効化

bs
1const fs = require('fs');
2
3const baseDir = "./htdocs";
4
5module.exports = {
6  files: `${baseDir}/**/*`,
7  server: {
8    baseDir: baseDir,
9    index: "index.html"
10  },
11  proxy: false,
12  port: 3000,
13  rewriteRules: [
14    {
15      match: /<!--#include virtual="(.+)" -->/g,
16      fn: (req, res, match, filename) =>
17        fs.statSync(`${dest}${filename}`) ? fs.readFileSync(`${dest}${filename}`, 'utf-8') : '',
18    },
19  ],
20};

を試しましたがSSIが有効になりませんでした。
なにとぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

私もGulp4から同様の問題で『browsersync-ssi』から『connect-ssi』に乗り換えました。
『connect-ssi』での例となってしまいますが、乗り換えを検討してみるのはどうでしょうか？

$npm install connect-ssi

私の環境では、下記のような形で期待通りに動いております。

const ssi = require('connect-ssi');


const baseDir = "./htdocs";
const browserSyncOpt = {
  port: 3000,
  server: {
    baseDir: baseDir,
    index: 'index.html',
    middleware: [
      connectSSI({
        ext: '.html',
        baseDir: baseDir
      })
    ],
  },
  reloadOnRestart: true,
}

function browserSyncFunc(done) {
  browserSync.init(browserSyncOpt);
  done();
}


exports.default = gulp.series(browserSyncFunc);

参考にしたサイト：
https://hyper-text.org/archives/2018/12/gulp-4-0-release.shtml
https://qiita.com/manabuyasuda/items/0971dbd3729cf68f87fb

投稿2021/04/26 20:42