我目前正在使用 Gulp 作为项目的构建工具。 Gulp 任务之一使用 Assemble 将 Handlebars 页面/布局组装成 HTML:
var assemble = require('assemble')();
gulp.task('assemble', ['clean'], function () {
assemble.partials('./partials/**/*.hbs');
assemble.layouts('./layouts/**/*.hbs');
assemble.pages('./pages/**/*.hbs');
loadHelpers(); // Calls assemble.helpers(...) on some Handlebars helpers
var data = require('./hbs_context.json');
assemble.data(data);
assemble.data({root: process.cwd()});
return assemble.toStream('managements')
.pipe(assemble.renderFile())
.pipe(plugins.extname()) // Converts .hbs to .html
.pipe(gulp.dest('.tmp/'));
});
我遇到了我的项目的一部分,它需要从一个数据数组创建多个页面,其中数组的每个对象都是一个单独页面的上下文。
同样的问题已被提出并多次回答:
How can I generate multiple pages from a JSON file with Assemble
Assemble: How can I generate pages from json/yaml?
grunt assemble multiple files from one datafile
https://github.com/assemble/assemble/issues/236
https://github.com/assemble/assemble/issues/184
https://github.com/assemble/assemble/pull/234
但是,所有提供的解决方案都使用 Grunt 选项,我不知道如何在 Gulp 中做同样的事情。那么,在 Gulp 中是否有等效的方法来执行此操作?
最佳答案
我刚刚开始设置 Assemble,它似乎在 gulp 中运行没有问题。这depreciated NPM plugin展示了它是如何完成的,注意不同之处:
用 Gulp 组装
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var app = assemble();
gulp.task('load', function(cb) {
app.partials('templates/partials/*.hbs');
app.layouts('templates/layouts/*.hbs');
app.pages('templates/pages/*.hbs');
cb();
});
gulp.task('assemble', ['load'], function() {
return app.toStream('pages')
.pipe(app.renderFile())
.pipe(htmlmin())
.pipe(extname())
.pipe(app.dest('site'));
});
gulp.task('default', ['assemble']);
不用 Gulp 组装
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var app = assemble();
app.task('load', function(cb) {
app.partials('templates/partials/*.hbs');
app.layouts('templates/layouts/*.hbs');
app.pages('templates/pages/*.hbs');
cb();
});
app.task('assemble', ['load'], function() {
return app.toStream('pages')
.pipe(app.renderFile())
.pipe(htmlmin())
.pipe(extname())
.pipe(app.dest('site'));
});
app.task('default', ['assemble']);
Assemble 可以毫无问题地使用所有 Gulp 插件。
如果您想了解更多信息,请查看本讲座:https://www.youtube.com/watch?v=R9kOy2e5koE
到目前为止,我发现您可以像这样插入数据:
app.task('load', function(cb) {
app.data('templates/data/*.json');
app.partials('templates/partials/*.hbs');
app.layouts('templates/layouts/*.hbs');
app.pages('templates/pages/*.hbs');
cb();
});
它必须是“加载”任务中的第一个。
关于gulp - 如何使用 Gulp 中的 Assemble 从数据创建页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35189237/