2019年5月17日

gulpでフレームとコンテンツのHTMLを組み合わせる

webサイトを作るにあたって、複数のページで使用する共通部分というのが必ず出てくる。たとえばそれは「フレーム」と呼ばれることがある。

もし、共通部分をそれぞれのHTMLにベタで書いていた場合、いざ変更する時にすべての箇所を変更しなくてはならず非常に手間がかかる。もちろん一括置換という方法もアリだが、常に均一に保つのはやはり手間だ。

gulpを使えば、フレームとコンテンツのHTMLを別々に用意して、それらを組み合わせることができる。

フレームとコンテンツのHTMLを用意

作業ディレクトリ(たとえばホームディレクトリに「gulp-test-002」)を用意し、ターミナルでアクセス。

cd ~/gulp-test-002

直下に「dev」フォルダを作成し、以下のような階層を構築する。

dev
└── template
    ├── layout
    │   └── _frame.html
    └── page
        ├── test-1.html
        └── test-2.html

「_frame.html」に以下のコードを記述。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- @@placeholder= title -->
</head>
<body>
  <!-- @@placeholder= content -->
</body>
</html>

「test-1.html」に以下のコードを記述。

<!-- @@master  = ../layout/_frame.html-->

<!-- @@block  =  title-->
<title>test1</title>
<!-- @@close-->

<!-- @@block  =  content-->
<p>コンテンツ1</p>
<!-- @@close-->

「test-2.html」に以下のコードを記述。

<!-- @@master  = ../layout/_frame.html-->

<!-- @@block  =  title-->
<title>test2</title>
<!-- @@close-->

<!-- @@block  =  content-->
<p>コンテンツ2</p>
<!-- @@close-->

モジュールをインストール

HTMLの組み合わせには「gulp-html-extend」というモジュールを使う。gulpと一緒に作業ディレクトリにインストールする。

npm i -D gulp gulp-html-extend

gulpfile.jsを作成

作業ディレクトリの直下にgulpfile.jsを作成し、以下のコードを記述。

// モジュールを読み込む
const gulp = require('gulp');
const extender = require('gulp-html-extend');

// 各パス
const paths = {
  "dev": {
    "template": "./dev/template",
    "page": './dev/template/page'
  },
  "dist": {
    "html": "./dist/html"
  }
}

// フレームHTMLとコンテンツHTMLをひとつにして出力するタスク
function html_extend(){
  // コンテンツを取得
  return gulp.src(paths.dev.page + '/*.html')
    // これが全部よろしくやってくれる
    .pipe(extender({
      // コンテンツ箇所をコメント明示する機能を無効化
      annotations:false
    }))
    // ビルドしたものを配置
    .pipe(gulp.dest(paths.dist.html));
}

// 「test」という名前でタスクを実行する
exports.test = html_extend;

「*.html」と書くことで、指定パス配下のすべてのHTMLファイルを対象にできる。

タスクを実行

npx gulp test

を実行すると、_frame.htmlにtest-1.htmlとtest-2.htmlが挿入された形で、test-1.html、test-2.htmlが「dist」に生成される。