Web Starter Kitで SSI したいと思った話

Web Starter Kit

サクッとペライチのhtmlページを作るときに便利につかえる Web Starter Kit を 10ページくらいのボリュームの静的サイトを作るのにもうちょっと便利にならんかと思ったのが始まり。

まずはすべてのページに共通するパーツ、ヘッダ、フッタを SSI すればよくね？と思い、 connect-ssi を導入。

...
import connectSSI from 'connect-ssi';
...

// Watch files for changes & reload
gulp.task('serve', ['scripts', 'styles'], () => {
  browserSync({
    ...
    server: {
      baseDir: ['.tmp', 'app'],
      middleware: [
        connectSSI({
           baseDir: __dirname + '/app',
           ext: '.html'
        })
      ]
    },
    port: 3000
  });
  ...
});

構築しながら確認で gulp serve している間は問題なかった。

gulp serve:dist でビルドしたところ、SSIしていたヘッダ、フッタが消えた。そんな予感はしていた。気づかないふりをして構築していた。最悪コピペすりゃいいと思っていた。だって serve:dist パートに設定書いてないしね。

いよいよ納期も迫ってきたので、真面目に考えることにする。

とりいそぎ serve:dist にも同様の設定を施すが、ヘッダ、フッタは消えたままだ。出力されたhtmlを確認するとコメント行が削除されていることを確認。 html-minifiier によってコメント行が削除されているようだ。

// Scan your HTML for assets & optimize them
gulp.task('html', () => {
  return gulp.src('app/**/*.html')

    ...

    // Minify any HTML
    .pipe($.if('*.html', $.htmlmin({
      removeComments: true, # ココ
      ...
    })))
  ...
});

コメントを残す設定にすることも考えたが、せっかく WSK を使っているのに負けた気分になるので、対策を考えることにする。

ようは部分htmlを特定の場所に挿入できればよいわけで、はたして gulp-file-inlude というツールを見つけた。

というわけで以下のような感じで導入はでき、 serve:dist でヘッダ、フッタが出力されていることが確認できた。

    <div id="content">
      @@include('./header.html')
      <section id="">

  // fileInclude
  .pipe(fileInclude({
              prefix: '@@',
              basepath: './app/includes/'
  }))

やったぜ、と喜ぶのは尚早で、 gulp serve 時には SSI を使いたい。リアルタイムで構築しながら確認しているのだから。

というわけで

      <!--#include virtual="/includes/header.html" -->
      @@include('./header.html')

と併記してみる。

serve:dist 時には gulp-file-include の処理が実行され、 SSIのコメント行は削除されるのでOK。

serve 時は SSIが実行されて、 gulp-file-include の行が残る。残念。

まぁ構築確認時の問題なので気にしないという手もあった。
しかしここで電流走る。以下のように書けばよいのでは？

    <div id="content">
      <!--#include virtual="/includes/header.html" -->
      <!-- @@include('./header.html')<!-- -->
      <section id="">

  // fileInclude
  .pipe(fileInclude({
              prefix: '<!-- @@',
              basepath: './app/includes/'
  }))

つまり gulp-file-inlude の プレフィクスを <!-- @@ としてコメント行に内包する。 <!-- @@include('./header.html') までが部分html で置換されるので、 <!-- --> が コメント行として残り、最終的に html-minifier で削除されるという寸法。

めでたしめでたし。