zukucode
主にWEB関連の情報を技術メモとして発信しています。
gulp

gulp front-matterの内容をdataとして使用する

ブログの記事を作成するにあたって、title descriptionのメタ情報などファイルごとに管理する情報はfront-matterの形式で管理すると便利です。

front-matterとは

front-matterを使うと、ファイルの先頭の---で囲まれた部分を簡単にデータとして扱うことができるようになります。

---
title: タイトル
arr: ['配列', 'も', '設定', 'できます']
obj: {'object': 123, 'も': 'test', '設定可能': 456}
---
記事の内容

gulpでfront-matterを使う

最初にfront-matterのパッケージをインストールします。

gulp-front-matterというgulp専用のパッケージも用意されていますが、細かな制御も実装したいため、普通のfront-matterを使用します。

$ npm install --save-dev front-matter

また、タスク処理でfront-matterのデータを、扱うためにgulp-dataもインストールします。

$ npm install --save-dev gulp-data

gulp-〜を自動読み込み

gulp-dataなどgulp-〜のパッケージを自動で読み込むためにgulp-load-pluginsをインストールします。

$ npm install --save-dev gulp-load-plugins

gulpをES2015で実装するで紹介したように、gulpfileはES2015の記法で実装しています。

gulpfile.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';

const $ = gulpLoadPlugins();

// $.data でgulp-dataのパッケージが使用可能になります。

タスク処理の流れの中で以下のように実装します。

gulpfile.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import fm from 'front-matter';

const $ = gulpLoadPlugins();

// task処理一部抜粋
.pipe($.data((file) => {
  const content = fm(String(file.contents));
  // ファイルの内容を設定します（front-matterの記載部分を取り除く）
  file.contents = new Buffer(content.body);
  // front-matterの情報をデータとして返します
  return content.attributes;
}))
gulp

関連記事