【gulp】BrowserSyncでSSIを使う方法についてメモメモ

gulp

2015.06.25

みなさま、こんにちは。
嫁に20年前の写真を見せて、「誰に似てる？」って聞いたら「堺雅人」と言ってもらえて喜んでいる
kourakuです。

さてさて、たまにですけどSSIを使ってコーディングする案件が来ることがあります。
そんなとき、わざわざSSIが使えるようにサーバを立ち上げるとか、ちょっと手間ですよね。
そんな面倒も gulp+BrowserSync に見てもらう設定をしてみよう！ということについてメモメモ。

※前提：gulp、CofeeScript導入済。
※前回の記事『【gulp】CoffeeScriptとBrowserSync導入をメモメモ』の内容を元に進めていきます。

BrowserSyncでSSIを使う準備

それでは早速、次のコマンドを叩いて、SSIを使うためのプラグインをインストールします。
ここではconnect-ssiを使用します。

connect-ssi

$ npm install connect-ssi --save-dev

インストールが完了したら、BrowserSyncでSSIを使えるようgulpfile.coffeeに設定しましょう。
まずは、先ほどインストールしたプラグインをrequireします。
BrowserSyncの下にでも書きましょうか。

[gulpfile.coffee]
  :
browserSync = require 'browser-sync'
connectSSI = require 'connect-ssi'
  :

続いて、BrowserSyncのサーバ設定にmiddlewareとしてSSIを設定します。
以下の様にコードを書きます。

[gulpfile.coffee]
  :
# BrowserSyncの設定
gulp.task 'browser-sync', ->
	browserSync.init
		server:
			# ルートを指定します
			baseDir: paths.pub
			# middlewareを使う設定
			middleware: [
				# SSIの設定情報
				connectSSI(
					baseDir: __dirname + '/htdocs'
					ext: '.html'
				)
			]

  :

gulp側の設定はこれで完了しました。
あとは、HTMLに次のようなコメントを書いて、includeさせるファイルを用意すればOKです。

[/htdocs/index.html]
  :
<!--#include file="/ssi/_header.txt" -->
  :

[/htdocs/content1/index.html]
  :
<!--#include file="/ssi/_header.txt" -->
  :

[/htdocs/content2/index.html]
  :
<!--#include file="/ssi/_header.txt" -->
  :

[/htdocs/ssi/_header.txt]
<header>
<p>ヘッダーだよ</p>
</header>

はい、これでindex.html、/content1/index.html、/content2/index.htmlを開くと
_header.txtの内容が表示されるようになりました。

ここまでのディレクトリ構造はこんな感じです。

┬ [htdocs] ──────┬ index.html
｜                      ├ [content1] ─── index.html
｜                      ├ [content2] ─── index.html
｜                      └ [ssi]  ───── _header.txt
├ [node_modules] ─── plugin
├ gulpfile.coffee
├ gulpfile.js
└ package.json

virtualを使いたいけど使えない・・・そんな時の対処方法

さて、1点注意することがあります。
今回file="～"で読み込むファイルを指定しています。
この場合は、gulpfile.coffeeで設定したbaseDirをルートとして認識してもらえます。

場合によってはvirtual="～"で仮想パスを設定しないといけない場合があります。
しかし、virtualはbaseDirをルートとして認識しません。。。

今回使用しているプラグインconnect-ssiはnode-ssiを利用しているのですが、
そのnode-ssiのドキュメントを見るとこう書かれています。

Note:
・file includes are always relative to the baseDir provided in the options.
・virtual includes are relative to the current file.

英語力が全くないkourakuが頑張って脳内翻訳をしてみたところ、
なるほど・・・やはり相対パスしか見てくれないようです。

ということで、こんな時の対処方法は・・・
まずは一旦file="～"でコーディングを進めましょう（笑）。
あ、笑ってますが冗談ではないですよ。

一旦fileで組んで、納品する時にvirtualに一括置換をかければ良いわけです。
ただ、その一括置換をエディタとかでやるのも芸がないので、
gulpのタスクとして追加してみてはいかがでしょう？

置換はgulp-replaceにお任せ！

ということで、次のコマンドを叩いて、置換を行うためのプラグインgulp-replaceを
インストールしましょう。

gulp-replace

$ npm install gulp-replace --save-dev

続いて、file → virtualへの置換タスクを作ります。
gulpfile.coffeeに次の様なコードを書きます。

[gulpfile.coffee]
  :
plumber = require 'gulp-plumber'
replace = require 'gulp-replace'
  :
# SSI Code Change : file -> virtual
gulp.task 'ssiChangeVirtual', ->
	gulp
	.src paths.pub+'**/*.html'
	.pipe plumber()
	.pipe replace(/<!--#include file/g, '<!--#include virtual')
	.pipe gulp.dest paths.pub
	return
  :

はい、gulp-plumberというプラグインをこっそり追加しています。

gulp-plumber

これは一体何かと言いますと、途中でエラーが起こってもタスクを
強制停止させないようにするためのものです。
これを入れておかないと、後々SassだのJadeだの使い始めたときに面倒なことが起こります。

ということで、次のコマンドでgulp-plumberもインストールしておきます。