gulpでSSI（サーバーサイドインクルード）を使用する「connect-ssi」

最近SSI（サーバーサイドインクルード）を使う機会があり、ローカル開発環境でも確認のためにSSIを表示できるようにする必要がありました。

今回はBrowserSyncと合わせて使うことでSSIが使えるようになる「connect-ssi」についてまとめておきます。

connect-ssiのインストール

まずは「connect-ssi」のインストールからです。
BrowserSyncと合わせて使うため、gulp自体と一緒にインストールしておきます。

npm install gulp -d
npm install browser-sync -d
npm install connect-ssi -d

gulpfile.jsの設定

下記がgulpfile.jsの設定です。
browserSync.init({});内で「middleware」を呼び出していて、そこでconnect-ssiの設定をしています。

var gulp = require('gulp');
var browserSync = require("browser-sync");
var connectSSI = require('connect-ssi');

// 起動時のパス
var startPath = '/index.html';

// BrowserSyncの設定
gulp.task('browser-sync', function(done) {
  browserSync.init({
    server: {
      baseDir: "./dist",
    },
    startPath: startPath,
    middleware: [
		connectSSI({
			baseDir: './dist',
			ext: '.html'
		})
	]
  });
  done();
});
gulp.task('bs-reload', function(done) {
  browserSync.reload();
  done();
});
var browserSync = require('browser-sync');

// 監視
gulp.task('watch', function(done) {
  gulp.watch(['/html**/*.scss'], gulp.task('bs-reload'));
  gulp.watch(['/html**/*.css'], gulp.task('bs-reload'));
  gulp.watch(['/html**/*.html'], gulp.task('bs-reload'));
  gulp.watch(['/html**/*.{png,jpg,gif,webp,svg,ics,css,pdf,js}'], gulp.task('bs-reload'));
  done()
});

gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));

設定することは「baseDir」で読み込みの基準となるディレクトリを指定するのと、「ext」でSSIで読み込むファイルの拡張子を指定するくらいです。

これで下記コマンドでgulpを起動すると、localhostがブラウザで起動して、SSIの記述がある場合は表示されるようになります。

npx gulp