SSIのインクルードのような感覚でソースの一部を別ファイルから呼び出すgulpタスクです。
可読性を良くするために長いHTMLを分割したり、くりかえし呼び出す共通パーツに使ったり、
ejsやpugを導入するほどでもないとき、カジュアルに使えます。
- replaceで
<!-- #include virtual="header" -->
の書式をみつける - 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>