サイト制作に関するメモ書き

HOME > HTML・CSS > Pugとgulp-dataを使ってmetaの内容をjsonで管理する

Pugとgulp-dataを使ってmetaの内容をjsonで管理する

gulp-dataを使って、Pugで使うmetaの内容をjsonで管理するようにしてみます。

サンプルコード

gulp-pugとgulp-dataをインストールします。

npm install gulp-pug --save-dev
npm install gulp-data --save-dev

gulpfile.jsに以下のように記述します。

var gulp = require('gulp'),
    pug  = require('gulp-pug'),
    data = require('gulp-data');

gulp.task('pug', function() {
	gulp.src(
		['./_pug/**/*.pug', '!./_pug/**/_*.pug']
	)
	.pipe(data(function(file) {
		// metaのjsonファイルを取得
		var metaData = require('./_pug/data/meta.json');
		// 対象のファイルパスを取得して、\を/に置換
		var filePath = file.path.split('\\').join('/');
		// 必要なファイルパス部分のみ取得
		var fileName = filePath.split('_pug')[1].replace('.pug', '.html');
		// jsonファイルから対象ページの情報を取得して返す
		return metaData[fileName];
	}))
	.pipe(pug({
		pretty: true,
		basedir: '_pug'
	}))
	.pipe(gulp.dest('./'))
});

9~18行目がjsonファイルを扱う部分になります。

ディレクトリ構造を以下のようにして、実際に試してみます。

  • _pug
    • data
      • meta.json
    • about
      • index.pug
      • flow.pug
    • index.pug
    • no-meta.pug
  • gulpfile.js

meta.jsonに各ページのmeta情報を記述します。

meta.json

{
	"/index.html": {
		"title":"トップページ",
		"description":"トップページです。",
		"keywords":"トップ,トップ,トップ"
	},
	"/about/index.html": {
		"title":"アバウトページ",
		"description":"アバウトページです。",
		"keywords":"アバウト,アバウト,アバウト"
	},
	"/about/flow.html": {
		"title":"〇〇の流れページ",
		"description":"〇〇の流れページです。",
		"keywords":"〇〇の流れ,〇〇の流れ,〇〇の流れ"
	}
}

_pugディレクトリ内の各Pugファイルを以下のように記述します。

Pug

doctype html
html(lang="ja")
  head
    title #{title}
    meta(name="description" content=description)
    meta(name="keywords" content=keywords)
  body

HTMLにコンパイルすると、以下のように出力されました。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>トップページ</title>
    <meta name="description" content="トップページです。">
    <meta name="keywords" content="トップ,トップ,トップ">
  </head>
  <body></body>
</html>

about/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>アバウトページ</title>
    <meta name="description" content="アバウトページです。">
    <meta name="keywords" content="アバウト,アバウト,アバウト">
  </head>
  <body></body>
</html>

about/flow.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>〇〇の流れページ</title>
    <meta name="description" content="〇〇の流れページです。">
    <meta name="keywords" content="〇〇の流れ,〇〇の流れ,〇〇の流れ">
  </head>
  <body></body>
</html>

no-meta.htmlはjsonファイルに設定していないので、値が空になります。

no-meta.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
    <meta name="description">
    <meta name="keywords">
  </head>
  <body></body>
</html>

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP