GulpでSSIを使う

SSIを使用するコーディング案件が続いたのでメモです。

connect-ssiのインストール

まずはGulpプロジェクトにconnect-ssiをインズトールします。

$ npm install connect-ssi –save-dev

gulp.jsに読み込みます。

var connectSSI = require ('connect-ssi');

BrowserSyncに設定

以前の最近使っているgulp.jsを晒してみるで使ったgulp.jpに差し込むとこんな感じです。

// ディレクトリ
var dir = {
  src: 'src/',
  dest: 'dist/'
}

〜略〜

// Browser Sync
gulp.task('browser-sync', function(done) {
  browserSync.init({
    server: { //ローカルサーバ
      baseDir: dir.dest,
      middleware: [
        connectSSI({
          baseDir: __dirname + '/' + dir.dest,
          ext: '.html'
        })
      ],
      index: "index.html",
    }
  });
  done();
});

baseDirの__dirname以下は「/フォルダ名」な感じになるようにします。

これでGulpを起動するとSSIが使えます。

SSIで表示するファイルを出力するのも忘れずに！

参考サイト

【gulp】BrowserSyncでSSIを使う方法についてメモメモ – バシャログ

browser-syncでSSIを使う – cly7796.net