Posted at

gulp-ejsを利用してJSONファイルからURLを一括挿入

More than 3 years have passed since last update.

大量の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>