Дублируйте и переименовывайте содержимое gulp.src и передавайте некоторые данные на страницы

Question

Это рабочая функция из проекта gulp для чтения файлов из src / pages, выполнения панини и чернильной магии и записи всего в dist:

function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers'
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
};

Но я хочу продублировать и переименовать 10 HTML-страниц в src / pages для каждого элемента "event" в файле JSON (который содержит 500 объектов "event" в массиве и уникальное "name" для каждого события), затем передавайте переменные на каждую страницу из объекта json в panini, позволяйте panini и inky делать свое дело и записывать все файлы в dist.

500 элементов событий в массиве JSON и 10 файлов HTML в папке страниц должны создать 5000 файлов HTML в папке dist, где event.name является первой частью имени файла HTML.

Итак, я добавил import loadJsonFile from 'load-json-file'; в gulpfile и функцию forEach для функции pages:

function pages() {
  return loadJsonFile('src/data/events.json').then(json => {
    json.forEach(function(event) {
      gulp.src('src/pages/**/*.html')
          .pipe(panini({
            root: 'src/pages',
            layouts: 'src/layouts',
            partials: 'src/partials',
            helpers: 'src/helpers'
          }))
          .pipe(inky())
          .pipe(gulp.dest('dist'));
    });
  });
}

Как бы я сделал дублирование, переименование и передачу объекта в панини?

Спасибо

Answer 1

У вас есть особая причина для такого сложного подхода? На первый взгляд, не могли бы вы просто поместить переменные Панини в ваш HTML с каждым оператором, который нужно повторить для всех данных? Я понимаю, что я могу что-то упустить, но я могу поделиться своим именем / адресом для 300 членов клуба, если вы захотите.

Answer 2

Не пытаюсь попасть в твоё лицо, но я бы хотел помочь. Файл данных "Мои участники" (json или yml) содержит все члены (300). В одном из полей указываются действия участника, такие как (группа компьютеров, езда на велосипеде, инвестиции, мост и т. Д.). Теперь, чтобы показать данные на веб-сайте, у меня есть вкладка для каждого действия a1, a2, a3, a4,a5 (и одна для всех участников). Под вкладкой, используя panini:

<div class="tabs-panel" id="computer">
      <h3  class="smCaps">Computer Group - <span class="h5">Bill Booth</span></h3>
    <div class="grid-x grid-padding-x small-up-2 medium-up-4 ">
{{#each mymemberjson}}
{{#ifequal a1 'Computer Group'}}
<div class="cell">
<a data-open="{{LName}}{{f1}}">{{FName}} <b>{{LName}}</b></a>

<div class="reveal" id="{{LName}}{{f1}}" data-reveal>
  <h3>{{FName}} {{LName}}  {{#if Position}} <span class="button primary">{{Position}}</span> {{/if}}</h3>
  <p>Spouse: {{Spouse}}<br>
    {{Street}}<br>{{Town}} {{Postal}}<br>
  Phone: {{Telephone}}<br>
  Email: <a href="mailto:{{E_mail}}">{{E_mail}}</a>
  </p>
   <p>{{a1}} &nbsp; {{a2}} &nbsp; {{a3}} &nbsp; {{a4}} &nbsp; {{a5}}</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
</div>
{{/ifequal}}
{{/each}}
    </div>
</div>

Таким образом, вам нужно настроить свои 10 вкладок, разделив события на любые типы, которые вы хотите. Надеюсь, это полезно.