大量のURLをHTMLに挿入する場合、
エクセルからURLをコピペしてちまちま貼り付けることも多いですが、
gulp-ejsを利用すると一括でURLを挿入できます。
※node.jsとgulpは既にインストール済みとしてインストール方法は省略します。
- このサンプルのファイル構成
project
┣ gulpfile.js
┣ sample.json <- ejsテンプレートに読み込ませるjsonファイル
┣ sample.ejs <- ejsテンプレート
┗ sample.html <- 出力結果
gulp-ejsのインストール
npm install --save-dev gulp-ejs
jsonファイルを用意する
sample.json
[
{
"url": "http://www.test1.com/"
}
,
{
"url": "http://www.test2.com/"
}
,
{
"url": "http://www.test3.com/"
}
,
{
"url": "http://www.test4.com/"
}
]
gulpfile.jsの記述例
gulpfile.js
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var ejs = require("gulp-ejs");
var jsonData = require('./sample.json'); // jsonファイル読み込み
gulp.task('setEjs', function() {
gulp.src("./sample.ejs")
.pipe(plumber())
.pipe(ejs({jsonData:jsonData })) // ejsテンプレートに渡す
.pipe(rename("sample.html"))
.pipe(gulp.dest("./"))
});
//ファイルの監視
gulp.task("default",['server'], function() {
gulp.watch(["./sample.ejs"], ["setEjs"]);
});
ejsテンプレートの記述例
sample.ejs
<%
var len = jsonData.length;
var url;
// URLを順番に取得するクロージャ
function setURL(){
var i = 0;
return function(){
url = i < len ? jsonData[i].url : 'error';
i++;
};
}
var set = setURL();
%>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p><a href="<% set(); %><%= url %>"><%= url %></a></p>
<p><a href="<% set(); %><%= url %>"><%= url %></a></p>
<p><a href="<% set(); %><%= url %>"><%= url %></a></p>
<p><a href="<% set(); %><%= url %>"><%= url %></a></p>
</body>
</html>
出力結果
sample.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p><a href="http://www.test1.com/">http://www.test1.com/</a></p>
<p><a href="http://www.test2.com/">http://www.test2.com/</a></p>
<p><a href="http://www.test3.com/">http://www.test3.com/</a></p>
<p><a href="http://www.test4.com/">http://www.test4.com/</a></p>
</body>
</html>