как мне получить доступ к json из данных gulp в nunjucks?

Question

У меня есть файл some.json вроде этого:

      {
  "disneyland-paris": {
    "lang": "de"
  },
  "hanoi": {
    "lang": "de"
  }
}

… Что я хочу попасть в шаблон nunjucks с:

      pipe(data(function() {
  return JSON.parse(fs.readFileSync(".../some.json"))
}))
.pipe(nunjucksRender())

Как мне получить доступ к этим данным в nunjucks?

Это не работает:

      {{ some }}

или

      {{ some.json }}

Answer 1

Один из многих подходов, который вы можете использовать, — это использовать gulp nunjucks render для вашего проекта gulp. Если вы решите пойти по этому пути, вы можете использовать следующие шаги в качестве проверки концепции для достижения своей цели. А если нет, вы все равно можете позаимствовать идеи из следующих шагов!

• Шаг 1. В вашем проекте «вы можете» структурировать данные JSON следующим образом в файле с именем Languages.js:

      const languages = [
  {
    "group": [{
      "location":"disenyland-paris",
      "lang": "de"
    },
    {
      "location":"hanoi",
      "lang": "de"
    },
  ]
}];

module.exports = languages;

• Шаг 2. Из вашего gulpfile.js, предполагая, что вы запускаете проект gulp, вызовите свои данные JSON, а затем укажите их в своей логике Nunjucks как глобальную среду...

      ...

const nunjucksRender = require('gulp-nunjucks-render');
const Languages = require('./src/models/Languages');

...

const manageEnvironment = function (environment) {
    environment.addGlobal('mLangauges',Languages);
}

...

function genNunJucks(cb) {
    return src(['src/views/*.html'])
        .pipe(nunjucksRender({
            path: ['src/views/', 'src/views/parts'], // String or Array
            ext: '.html',
            inheritExtension: false,
            envOptions: {
                watch: true,
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(dest('pub')); //the final destination of your public pages
    cb();
}

//then do more stuff to get genNunJucks() ready for gulp commands...

• Шаг 3. В файле шаблона Nunjucks вызовите данные следующим образом...

         {% for sections in mLangauges %}
      {% for mgroup in sections.group %}
         <p>{{mgroup.location}}</p>
         <p>{{mgroup.lang}}</p>
      {% endfor %}
   {% endfor %}

Все, что осталось сделать, это запустить проект gulp :)

Совет. Если вы измените свои данные JSON во время работы, вам может потребоваться перестроить проект gulp, чтобы увидеть обновленные данные JSON на своей веб-странице. Пересборка может быть такой же простой, как запуск «npm run build», если вы настроили ее прямо в файле package.json.