Gulp + browser-sync の環境でSSIを使う機会があったので、設定方法をメモしておきます。
設定方法
Gulpの環境を用意して、browser-syncとconnect-ssiをインストールします。
1 2 | npm install browser-sync --save-devnpm install connect-ssi --save-dev |
gulpfile.jsファイルに処理を追記します。
gulpfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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
- includes
- gulpfile.js
実際にSSIを使ってみます。
ヘッダーをSSIで管理するようにしてみます。
header.html
1 2 3 | <header class="header"> <p class="header_sitename">サイト名</p></header> |
ヘッダーのファイルをインクルードします。
index.html
1 2 3 4 | <!--#include virtual="/includes/header.html" --><div class="contents"> <p>コンテンツ</p></div> |
Browser-syncを起動して確認すると、以下のように表示できました。
index.html
1 2 3 4 5 6 | <header class="header"> <p class="header_sitename">サイト名</p></header><div class="contents"> <p>コンテンツ</p></div> |
【参考サイト】
コメントが承認されるまで時間がかかります。