サンプルファイル
https://github.com/shimakyohsuke/gulp-ejs-filesystem
取り急ぎ社内説明用に投稿
package.json
{
"devDependencies": {
"gulp": "^3.9.0",
"gulp-ejs": "^2.0.0",
"gulp-plumber": "^1.1.0",
"fs": "0.0.2"
}
}
gulpfile.js
'use strict';
var gulp = require('gulp');
var ejs = require('gulp-ejs');
var plumber = require('gulp-plumber');
var fileSystem = require('fs');
gulp.task('ejs', function () {
return gulp.src('./src/ejs/*.ejs')
.pipe(plumber())
.pipe(ejs(
{
config: JSON.parse(fileSystem.readFileSync('./data/config.json')),
page: JSON.parse(fileSystem.readFileSync('./data/page.json')),
loop: require('./data/loop.js')
},
{
ext: '.html'
}
))
.pipe(gulp.dest('./dist/'));
});
/data/config.json
{
"siteTitle": "siteTitle"
}
/data/page.json
{
"hoge": {
"headline": "hogemoge"
}
}
/data/loop.js
module.exports = [
{
"tagline": "tagline",
"article": "article"
},
{
"tagline": "tagline2",
"article": "article2"
}
];
/src/ejs/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= page.hoge.headline %> | <%= config.siteTitle %></title>
</head>
<body>
<h1><%= page.hoge.headline %></h1>
<% loop.forEach(function(data){ %>
<div class="article">
<h2><%= data.tagline %></h2>
<p><%= data.article %></p>
</div>
<% }); %>
</body>
</html>
$ gulp ejs
/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hogemoge | siteTitle</title>
</head>
<body>
<h1>hogemoge</h1>
<div class="article">
<h2>tagline</h2>
<p>article</p>
</div>
<div class="article">
<h2>tagline2</h2>
<p>article2</p>
</div>
</body>
</html>