browser-syncでSSIを使う

Gulp + browser-sync の環境でSSIを使う機会があったので、設定方法をメモしておきます。

設定方法

Gulpの環境を用意して、browser-syncとconnect-ssiをインストールします。

npm install browser-sync --save-dev
npm install connect-ssi --save-dev

gulpfile.jsファイルに処理を追記します。

gulpfile.js

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

/* ==================================================
   Browser-sync
================================================== */
gulp.task('server', function() {
  browserSync({
    server: {
      baseDir: './dev/',
      middleware: [
        connectSSI({
          baseDir: __dirname + '/dev',
          ext: '.html'
        })
      ]
    }
  });
});

ディレクトリ構成は以下のようになっています。
開発はdevディレクトリ内で行う想定でgulpfile.jsを作成していますので、開発環境に応じて適宜変更してください。

• dev
  • includes
    • header.html
  • index.html
• gulpfile.js

実際にSSIを使ってみます。
ヘッダーをSSIで管理するようにしてみます。

header.html

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>

ヘッダーのファイルをインクルードします。

index.html

<!--#include virtual="/includes/header.html" -->
<div class="contents">
	<p>コンテンツ</p>
</div>

Browser-syncを起動して確認すると、以下のように表示できました。

index.html

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>
<div class="contents">
	<p>コンテンツ</p>
</div>

【参考サイト】

• 【gulp】BrowserSyncでSSIを使う方法についてメモメモ | バシャログ。
• gruntやgulpでSSIを利用する | Another Sky
• connect-ssi