Предоставление моделей данных для использования в шаблонах Gulp Nunjucks

Я хочу использовать Gulp для создания своих шаблонов Nunjucks с помощью gulp-nunjucks или gulp-nunjucks-render. Есть ли способ передать один или ряд файлов .json в пакет шаблонов для использования данных JSON в моих шаблонах nunjucks?

В идеале у меня будет каталог models/ с каждой страницей, имеющий соответствующий файл page.json с содержимым, которое будет использоваться в этом шаблоне.

Я хотел бы знать, возможно ли это с любым из вышеперечисленных плагинов, и если да, то как это можно реализовать. Любые примеры для одного или ряда файлов .json будут очень полезны.

2 ответа

Посмотрите на использование gulp -data https://www.npmjs.org/package/gulp-data он выдает JSON из любого источника, будь то файл JSON или база данных, который отправляет его по потоку через новый атрибут в файловом объекте (file.data). Ваш nunjucks-плагин необходимо будет изменить, чтобы использовать это свойство данных.


Это сработало для меня, но в моем случае это не все, что мне нужно. С моим gulpfile, как показано ниже:

//Compile Nunjucks Templates
gulp.task('nunjucks', function() {
 nunjucksRender.nunjucks.configure(['templates/'])
 return gulp.src('src/pages/*.html')
 .pipe(nunjucksRender(nunjucksOptions))
 .pipe(gulp.dest(output.html))
 .pipe(reload({stream:true}));
});

Использование gulp -data здесь для ввода моего JSON предоставляет только данные на страницы, а не частичные и макросы, в которые я включаю. В моем случае я использую центральный файл настроек JSON для эмуляции, например, как выглядит мой внешний интерфейс, когда пользователь входит в систему:

{
 "loggedin":false
}

и

{% if data.loggedin %}
<a href="#">
 <div>
 
 </div>
 <p>JohnDoe345</p>
</a>
{% else %}
<a href="#login" data-lity="">
 <div>Sign In</div>
</a>
{% endif %}

Сделать файл доступным для всех шаблонов/страниц/частичных/макросов и т.д. Я использую настройку gulp -nunjucks-render manageEnv следующим образом:

nunjucksOptions = {
 path: ['src/pages/', 'src/templates/'],
 watch:true,
 manageEnv:function(env){
 var data = JSON.parse(fs.readFileSync('states.json'));
 env.addGlobal('data',data);
 }
}

Благодаря Alex Ward для подсказки об использовании fs для хранения моего JSON от кеширования.

licensed under cc by-sa 3.0 with attribution.