使用 GULP 解析 JSON 并将结果输出到 HTML 文件 [关闭]答案

【问题标题】：Using GULP to parse JSON and output the result to a HTML file [closed]使用 GULP 解析 JSON 并将结果输出到 HTML 文件 [关闭]
【发布时间】：2016-01-26 13:00:50
【问题描述】：

我正在尝试使用 GULP 从目录中解析 JSON 文件并将结果写入 HTML 文件。这是可行的吗？如果是这样，请帮助我提供链接和示例。

【问题讨论】：

你想如何将解析结果写入 HTML 文件？你想使用一些模板吗？
我在 json 中有一个数组，我只想将数组的内容写入 .html 文件。

标签： html json parsing gulp

【解决方案1】：

除非你有多个文件，否则你不需要使用 gulp 将 .json 写入 HTML。

试试看：

用require读取json文件
使用 fs.readFileSync 读取 HTML 文件；
从 JSON 创建一些 HTML
用我的 HTML 替换自定义字符串到 HTML
写入文件

json 文件：

[
  {
    "name":"Doe",
    "firstName":"John",
    "age":"35"
  },
  {
    "name":"Man",
    "firstName":"Bat",
    "age":"40"
  }
]

html 文件：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Firstname</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      %CONTENT%
    </tbody>
    </table>
  </body>
</html>

javascript：

var fs = require('fs');
var json = require('./myjsonFile.json');
var html = fs.readFileSync('./myhtmlFile.html', {encoding:'utf8'});

// create table HTML
// parse results and return each HTML lines
var parsedResults = json.map(function(item) {
  return '<tr>'
    + '<td>' + item.name + '</td>'
    + '<td>' + item.firstName + '</td>'
    + '<td>' + item.age + '</td>'
    + '</tr>'
})

var newHtml = html.replace('%CONTENT%', parsedResults.join('\n'));

fs.writeFileSync('my-new-file.html', newHtml, {encoding:'utf8'});

【讨论】：

感谢您分享这段出色的示例代码。当我尝试做同样的事情时，我收到以下错误，TypeError: Cannot read property 'map' of undefined.
我还在 Gulp 任务中编写这段代码，以便我可以让它作为构建过程的一部分运行。这是代码，
var gulp = require('gulp'); var fs = 需要('fs'); var json = require('../../myjsonFile.json'); gulp.task('writeJSON', function(file, obj) { var parsedResults = json.results.map(function(item) { return item.name; }); fs.writeFileSync('myhtmlFile.html', parsedResults.join ('\n'), 函数 (err) { }); });
结果是我的代码有一点错误，只是使用“json”
应该是 require('./myjsonFile.json');否则找不到文件