gulp+ejs+json その2 - 新しい日記

ページの情報を json にまとめておいて、そこから情報を取ってきたり、出力場所をそれぞれのページで変えたりする場合、以下のようなやり方でできる。 meta の一部が違うとか、中身で共通する部分はあるけどそれぞれのページでユニークな部分が多いときに便利。ただし、jsonData[i].name.html という名前のファイルを予め作っておく必要あり。

おおまかな手順説明

テンプレートになる jsonData[i].name.html を作成
ページ内情報を記述しておく package.json を作成
gulp で ejs テンプレートエンジンで jsonData[i].name.html に package.json の内容を挿入して出力するタスクをページ分作って走らせる

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><%= pageData.title %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="keywords" content="<%= pageData.keywords %>" />
  <meta name="description" content="<%= pageData.description %>" />
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <h1><%= pageData.title %></h1>
  <p>ページの内容です。</p>
</body>
</html>

pages.json

[
  {
    "url": "hoge/index.html",
    "name": "index",
    "title": "愉快なホームページです", 
    "keywords": "愉快,最高,便利",
    "description": "このホームページには愉快なことがたくさん書いてあります。"
  },
...
]

gulpfile.js

var gulp = require('gulp');
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/
});
var jsonData = require('./_src/templates/pages.json');

var buildSet = [];
jsonData.forEach(function(page, i){
  gulp.task(page.name, function(){
    gulp.src('./_src/templates/'+page.name+'.html')
    .pipe($.plumber())
    .pipe($.ejs({
      pageData: page,
    }))
    .pipe($.rename(page.url))
    .pipe(gulp.dest('./'));
  });
  buildSet.push(page.name);
});

gulp.task('default', ['serve'], function(){
  gulp.watch('./_src/templates/**/*', buildSet);
});

index.html とか pages.json は特に何の変哲もないサンプルなのでここではおいといて。キモは gulpfile.js でのタスクの作り方。

まず、 var buildSet=[]; でビルドタスクをまとめるための配列を作成。この中に、forEach で pages.json にある分だけタスクを作成する。タスク名は jsonData[i].name から取ってくるのと、gulp.src() からは同名のテンプレートを参照。(gulp-ejs が ver 2 になってから、何が何でも.html で吐き出す仕様じゃなくなり、元の拡張子が引き継がれるようになったので、+.html です) それぞれのタスク内で pageData に配列の要素を入れる。 gulp-rename で jsonData[i].url にファイル名をリネームして出力。配列 buildSet にタスク名を追加。タスクのウォッチは buildSet をタスク対象にしてあげればOK（ただしファイルがたくさんあると全部のビルドがそれぞれ走るのでログが大変よく流れる）

こんなかんじでしょうか！中身がユニークすぎなければ、（値を流し込むだけでいけそうなら）いちいち jsonData[i].name という名前のテンプレートを作らなくても自動生成できるが（ネット上にはそのような情報がたくさんありますね）

今回2ヶ月ぶりの更新と、貧弱なメモブログだけど、1日30~50くらいアクセスがある。なんかみんな gulp+browserify の記事を見に来てるみたい。みんな browserify 好きだね。

近況ですが、 IE8 を切って jQuery を使わなくてもよくなってきたので、以前より js 書くのが楽しくなってきた。昨年は IE8 対応で今使ってない tips をかなり身につけてしまったのでよくなかった。週五の仕事に疲れて技術書もほとんど読めてない（まともに読んだのパーフェクト PHP くらいかもしれない）今年は今後も役立つ技術を中心に学んでいきたい。まずは新しい技術を使っていける環境に身を置きたい。紹介とか紹介とか紹介とか興味がありまくりなので tttttahiti[at]gmail までお願いします。ポートフォリオの url を送ったりします。ポートフォリオが見たいだけの野次でも大歓迎です。何卒宜しくお願い致します。