Question

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

在线查看示例，他们都提到解析数据作为汇编选项，但即使我这样做仍然无法正常工作。我做错了吗？

这是我的汇编任务：

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构造函数，而是使用.data实例上的app方法：

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

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

如果您在文档中找到了其他模式，请指出，以便我们更新。我们目前正在努力更新文档和网站。截至目前，该网站仅提及grunt-assemble。

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

1 个答案: