LoginSignup
11

More than 5 years have passed since last update.

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

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11