Googleスプレッドシートでmetaを管理しよう。(後編)

前回の続きとなります。
前回は

  1. Google Sheets APIを使い、Node.jsでGoogleスプレッドシートにアクセス
  2. 取得した値をパースしてJSONファイル生成

までの流れをやりました。

今回はJSONファイルの値をpugに渡して個々のページに反映させる部分を記していきます。
 
 

pugタスク追加

まずは必要なmoduleをインストールします。

$ npm i gulp-pug gulp-data --seve-dev

続いて前回作成したgulpfile.jsに追記する形でpugのタスクを書いていきます。

const pug = require('gulp-pug');
const data = require('gulp-data');
const json = require('./meta.json');

gulp.task('pug', () => {
  gulp.src([
    './src/**/*.pug',
    '!./src/**/_*.pug'
  ])
  .pipe(data((file) => {
    return variable(file);
  }))
  .pipe( pug({ pretty: true }))
  .pipe( gulp.dest('./html'));

  function variable(file){
    let file_path = '/' + file.relative.replace('.pug', '.html');
    let file_path_arr = file_path.split('/');

    return {
      __meta: json[file_path],
      __dirname: file_path_arr
    }
  }
});
  1. gulp-detaモジュールで取得した情報を元に処理したファイルのパスを取得し、JSONデータのキーと紐づくように変換
  2. 変換したパスを元にJSONデータの各ページの情報を返す __meta: json[file_path]
  3. ついでに変換したパスを'/'で配列にした値も返す(今回のmeta云々に関してはあまり関係ありませんが、シーンによってはちょっと便利な値です)
     
     

pugファイル作成

とりあえずextendsするファイルを作成します。
 
./src/_layout.pug

- var root_path = __dirname.join('/');
- var file_name = __dirname[__dirname.length - 1];
- var current_directory_path = __dirname.join('/').replace(__dirname[__dirname.length - 1], '');

- if(__meta)
  - var title = __meta.title;
  - var keyword = __meta.keyword;
  - var description = __meta.description;

block vars

doctype html
html(lang='ja')
  head
    meta(charset='utf-8')
    title!=title
    meta(name='keywords', content!=keyword)
    meta(name='description', content!=description)
    block js
    block css
  body
    block content
    - var root_path = __dirname.join('/');
    - var file_name = __dirname[__dirname.length - 1];
    - var current_directory_path = __dirname.join('/').replace(__dirname[__dirname.length - 1], '');

    - if(__meta)
      - var title = __meta.title;
      - var keyword = __meta.keyword;
      - var description = __meta.description;

    block vars

    doctype html
    html(lang='ja')
      head
        meta(charset='utf-8')
        title!=title
        meta(name='keywords', content!=keyword)
        meta(name='description', content!=description)
        block js
        block css
      body
        block content

 
次に./src/hoge/hoge/index.pugを作成してみます。
 

extends ../../_layout

block content
  p!=root_path
  p!=file_name
  p!=current_directory_path

 

実行

gulp pugコマンドの結果
 
./html/hoge/hoge/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HOGEHOGE</title>
    <meta name="keywords" content="hoge2,keyword">
    <meta name="description" content="hoge2_description">
  </head>
  <body>
    <p>/hoge/hoge/index.html</p>
    <p>index.html</p>
    <p>/hoge/hoge/</p>
  </body>
</html>

ちゃんと値が入りました。
ついでに__dirnameとして渡していた値もpug側で必要な値に変換すれば、都度パスを書かなくて良いシーンもあるので便利です。