SSIを使用するコーディング案件が続いたのでメモです。
まずはGulpプロジェクトにconnect-ssiをインストールします。
$ npm install connect-ssi –save-dev
gulp.jsに読み込みます。
var connectSSI = require ('connect-ssi');
以前の最近使っているgulp.jsを晒してみるで使ったgulp.jpに差し込むとこんな感じです。
// ディレクトリ
var dir = {
src: 'src/',
dest: 'dist/'
}
〜略〜
// ssi用ファイルを置いたフォルダの中身をコピーして出力
gulp.task('inc', (done) => {
gulp.src([dir.src + 'include/**/*'])
.pipe(gulp.dest(dir.dest + 'include'))
done()
})
// 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();
});
〜略〜
// gulpコマンドで最初に動作
gulp.task('default',
gulp.series(
'clean',
gulp.parallel(
'ejs',
'sass',
'js',
'img',
'inc', // ←追加
'watch',
'browser-sync'
)
)
);
baseDirの__dirname以下は「/フォルダ名」な感じになるようにします。
これでGulpを起動するとSSIが使えます。
HTMLやEJSの中でインクルードすると動きます。
<!--#include virtual="/include/hoge.html" -->
【gulp】BrowserSyncでSSIを使う方法についてメモメモ – バシャログ
browser-syncでSSIを使う – cly7796.net
