1

gulp-nunjucks-render で 30 以上の html ページをレンダリングしようとしています。1 つの nunjucks テンプレートと 2 つの 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));
  }

次のような sth の 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"
    }
  ]
}

そして、同じコンテンツを持つ 2 つのファイルを取得します (この場合、"some title2","../img/7.jpg","some content2"... 両方で)。

各htmlで異なるコンテンツを取得したい場合、何が間違っていますか? gulp や nunjucks に問題があるのでしょうか?

4

1 に答える 1