通过 Gulp 将 json 数据解析为 Assemble / Handlebar 部分

Question

我正在开发一个使用 Assemble 静态构建模块并将它们输出到 dist 文件夹的项目。如果没有 json，这可以按预期工作，但是我想稍微优化一下过程，以便每个模块都有自己的 *.json 文件，该文件充当清单，然后注入并与 Handlebars 一起使用，将这些变量放入部分/模块。

看网上的例子，他们都提到解析数据作为组装的一种选择，但即使我这样做了，它仍然不起作用。我做错了吗？

这是我的组装任务：

var gulp = require('gulp'),
    assemble = require('assemble'),
    rename = require('gulp-rename'),
    path = require('path'),
    fs = require('fs'),
    beautify = require('gulp-html-prettify'),
    gulpif = require('gulp-if'),
    utils = require(path.join(__dirname, '../lib/utils')),
    config = require(utils.getConfig()),
    app;

/**
 * Helper function to set our module key based on the filename.
 */
function fileNameAsModuleName(key, view) {
    var v = view ? view.basename : path.basename(key);
    v = v.split('/').pop().replace('.html', '').replace('.hbs', '');
    return v;
}

gulp.task('assemble:files', function() {

    app = assemble({
        data: './src/views/partials/**/*.json'
    });

    console.log(app.options);

    /**
     * Register all of our compiled component templates as partials
     * so we can render them all on the page.
     */
    app.create('pages', { viewType: 'layout', renameKey: fileNameAsModuleName });
    app.create('partials', { viewType: 'partial', renameKey: fileNameAsModuleName });
    app.create('styleguide', { viewType: 'partial', renameKey: fileNameAsModuleName });

    app.pages('./src/views/pages/*.html');
    app.partials('./src/views/partials/**/*.html');
    app.styleguide('./src/views/styleguide/index.html');

    app.toStream('styleguide')
        .pipe(app.renderFile())
        .pipe(rename('index.html'))
        .pipe(app.dest('./dist'));

    app.toStream('pages')
        .pipe(app.renderFile())
        .pipe(app.dest('./dist/pages'));
});

gulp.task('server:assemble', ['assemble:files']);

按照官方文档，我应该有 html/hbs 文件名的上下文。

foot.json:

{
    "script ": "/scripts/app.js"
}

foot.html

<script src="{{foot.script}}"></script>

但遗憾的是，如果我引用变量脚本，或者给它一个上下文/命名空间，那么它仍然不会在输出 html 中返回任何内容。我是否需要将数据直接解析为“app.partials”？

Answer 1

不要将data 作为选项传递给assemble 构造函数...在app 实例上使用.data 方法：

// from
app = assemble({
    data: './src/views/partials/**/*.json'
});

// to
app = assemble();
app.data('./src/views/partials/**/*.json');

如果您在文档中发现了其他模式，请指出，以便我们对其进行更新。我们目前正在努力更新文档和网站。截至目前，该网站仅引用grunt-assemble。