循环 json，gulp-nunjucks-render 渲染具有相同内容的所有文件答案

【问题标题】：Looping over json, gulp-nunjucks-render rendering all files with same content循环 json，gulp-nunjucks-render 渲染具有相同内容的所有文件
【发布时间】：2017-12-07 14:16:23
【问题描述】：

我正在尝试使用 gulp-nunjucks-render 渲染 30 多个 html 页面。我创建了一个 nunjucks 模板和两个 json 文件（页眉和页脚的通用模板部分以及一组帖子数据）。 “帖子”函数循环中的逻辑很简单：我获取所有帖子使用的一般信息，添加正确的帖子信息并将数据发送到将其呈现为 html 文件的函数。

我在我的“html”函数中使用 gulp-util 来注销用于渲染的数据，并且我看到数据是正确的（每个帖子都不同）。此外，文件名每次都应该不同。问题是渲染的html文件内容是一样的——最新渲染数据的内容。

我的 gulp 文件的相关部分：

var gulp = require('gulp'), 
    watch = require('gulp-watch'),
    rename = require('gulp-rename'),
    replace = require('gulp-replace'),
    nunjucks = require('gulp-nunjucks-render'),
    data = require('gulp-data'),
    gutil = require('gulp-util');


  gulp.task('watch-projects', function(){ 
  watchDir({ 
      output: 'group/',
      njk: 'group/parts/**/*.html',
      html: 'group/parts/*.html'});
  });
  function watchDir(project) {
    gulp.watch(project.njk, function() {render(project, "en"); render(project, "et");}); 
  }
  function render(project, language) {
    var data = require('./group/parts/data/' + language + '.json'),
    news = require('./group/parts/data/news.' + language + '.json');
    posts('group/parts/news.njk', project.output + language + "/", data, news);

  }
  function posts(template, output, data, posts) { 
    for (var item in posts.posts) {
      data.posts = posts.posts[item];
      html(template, output, data, {basename: data.posts['filename'], extname: ".html"});
    }
  }
  function html(template, output, thedata, name) {
    if (thedata.posts) {
      gutil.log(thedata.posts['title']);
    }
    gulp.src(template)
    .pipe(data(thedata))
    .pipe(nunjucks({path: ['group/parts/']))
    .pipe(rename(name))
    .pipe(gulp.dest(output));
  }

我使用的 news.en.json 文件看起来像这样：

{  
  "posts" : [
    {
      "title" : "some title",
      "hero" : "../img/6.jpg",
      "text" : "some content", 
      "pic1" :  "../img/6.jpg",
      "pic2" : "../img/6.jpg",
      "pic3" : "../img/6.jpg",
      "filename" : "news1"
    },
    {
      "title" : "some title2",
      "hero" : "../img/7.jpg",
      "text" : "some content2", 
      "pic1" :  "../img/7.jpg",
      "pic2" : "../img/7.jpg",
      "pic3" : "../img/7.jpg",
      "filename" : "news2"
    }
  ]
}

我得到两个具有相同内容的文件（在本例中为“some title2”、“../img/7.jpg”、“some content2”...）。

当我想在每个 html 中获取不同的内容时，我做错了什么？ gulp 或 nunjucks 是否有问题？

【问题讨论】：

标签： gulp nunjucks gulp-nunjucks-render

【解决方案1】：

我每次都在重写引用的变量。我必须制作数据的浅拷贝，而不是更改引用的对象本身。对于浅拷贝，复制的部分存储为参考，但其余部分单独存储。

function posts(template, output, data, posts) { 
  for (var item in posts.posts) {
    // line below did the trick, also had to change "data" in "html" function call to "current"
    var current = Object.assign({},data);
    current.posts = posts.posts[item];
    html(template, output, current, {basename: current.posts['filename'], extname: ".html"});
  }

【讨论】：