WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね