SSIのように外部ファイル化したパーツを1枚のHTMLに合成するgulpタスク

SSIのインクルードのような感覚でソースの一部を別ファイルから呼び出すgulpタスクです。

可読性を良くするために長いHTMLを分割したり、くりかえし呼び出す共通パーツに使ったり、
ejsやpugを導入するほどでもないとき、カジュアルに使えます。

replaceでの書式をみつける
Node.jsのfsモジュールでソースを取得
再帰関数をつかって、参照したテンプレートから更に参照されているテンプレートも取得

このようにして分割したHTMLを1枚のHTMLに戻します。
あとは、browserSyncで表示したり、Netlifyなんかでデプロイしたり煮るなり焼くなり。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <!-- #include virtual="hero" -->
    <main>
      <p>
        This is a static template, there is no bundler or bundling involved!
      </p>
    </main>
  </body>
</html>

Includeするソースの先頭に<!DOCTYPE html>をいれればHTMLバリデーションOKに

拡張子をhtmlにし、先頭に
<!DOCTYPE html<meta charset="utf-8" /<title-</title>
と入れておくと
HTMLのバリデーションチェックに合格します。

エディタの機能でHTMLのハイライトやバリデーションチェックを行っている場合、いつもどおりの感覚でコードを打てます。

<!DOCTYPE html><meta charset="utf-8" /><title>-</title>
<header>
  <h1>title</h1>
</header>

Includeするソースの先頭に<!DOCTYPE html>をいれればHTMLバリデーションOKに

関連記事