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

Question

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

看网上的例子，他们都提到解析数据作为 assemble 的一个选项，但即使我这样做了，它仍然无法正常工作。我做错了什么吗？

这是我的 assemble 任务：

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>

但遗憾的是，如果我引用变量脚本，或者给它一个 context/namespace，那么输出 html 中仍然 returns 没有任何内容。我需要直接解析数据到'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.

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

Parsing json data in to Assemble / Handlebar partials via Gulp

json

handlebars.js

assemble

gulp