如何在Node.js上将多个JSON文件拖入SWIG？

Question

这实际上是两个问题......

我有一个SWIG模板（index.html），我希望将多个JSON文件用于使用Node.js进行编译。一个“index.json”文件，其变量仅适用于该页面，然后是“common.json”文件，其中包含一组我希望在整个系统中使用的公共变量。

我还在“index.html”中有一个“header.html”模板和一个“footer.html”模板。我如何让他们分别拉出他们自己的“header.json”和“footer.json”文件？

最终，我试图让这一切都在GULP-SWIG中工作，因为我们已经在项目的其余部分一直运行GULP流程。

更新： GULP-SWIG会自动查找具有相同名称的JSON文件并对其进行处理，但没有关于包含其他JSON文件的文档。

我试过这种方式：

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var swig = require('gulp-swig');

// Swig Variables
var common = require('./json/common.json');   //   <--- NEW CODE
var optEng = {
    load_json: true,
    json_path: 'json/',
    data: {
        locale: 'en_US',
        currencyval: 'USD'
    }
};

// Tasks
gulp.task('swig-eng', function() {
    gulp.src('templates/*.html')
        .pipe(swig(common))   //   <--- NEW CODE
        .pipe(swig(optEng))
        .pipe(gulp.dest('./compiled/'));
});

gulp.task('watch', function() {
    gulp.watch('templates/*.html', ['swig-eng']);
    gulp.watch('includes/*.html', ['swig-eng']);
    gulp.watch('json/*.json', ['swig-eng']);
});

gulp.task('build', ['swig-eng', 'watch']);

我尝试过这种方式：

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var swig = require('gulp-swig');

// Swig Variables
var optEng = {
    common: require('./json/common.json'),   //   <--- NEW CODE
    load_json: true,
    json_path: 'json/',
    data: {
        locale: 'en_US',
        currencyval: 'USD'
    }
};

// Tasks
gulp.task('swig-eng', function() {
    gulp.src('templates/*.html')
        .pipe(swig(optEng))
        .pipe(gulp.dest('./compiled/'));
});

gulp.task('watch', function() {
    gulp.watch('templates/*.html', ['swig-eng']);
    gulp.watch('includes/*.html', ['swig-eng']);
    gulp.watch('json/*.json', ['swig-eng']);
});

gulp.task('build', ['swig-eng', 'watch']);

我创建了一个包含所需文件结构的ZIP文件： https://www.dropbox.com/s/psxsdn31rd5177h/Gulp-Swig%20Sample.zip

gulpfile.js文件是唯一需要更新的文件。

Answer 1

require他们

您只需require json文件并将它们作为本地变量传递给swig

swig.renderFile('/path/to/template.html', {
    common: require('path/to/your/common.json'),
    index: require('path/to/your/index.json')
    // etc
});

说明你......

＆＃34;包括＆＃34;您的页眉和页脚模板为partials，即

<强> index.swig.html

{# ... #}
{% include "header.swig.html" %}
{# ... #}
{% include "footer.swig.html" %}
{# ... #}

除非您指定with *whatever* only语句，否则它们将接收所有局部变量。 Check the include docs for further understanding

{% include "./partial.html" with my_obj only %}

你可以......

需要所有json文件并将它们作为局部变量传递，指定要传入的对象。

swig.renderFile('/path/to/index.swig.html', {
    common: require('path/to/your/common.json'),
    index: require('path/to/your/index.json'),
    header: require('path/to/your/header.json'),
    footer: require('path/to/your/footer.json')
    // etc
});

在 index.swig.html ...

上

{# ... #}
{% include "header.swig.html" with header only %}
{# ... #}
{% include "footer.swig.html" with footer only %}
{# ... #}

Answer 2

您可以使用gulp-swig中的setup选项，该选项可让您直接访问swig对象。获得访问权限后，您可以阅读有关如何传递数据的Swig文档。这是一个例子：

var opts = {
  setup: function(swig) {
    swig.setDefaults({
      locals: {
        common: require('path/to/your/common.json'),
        header: require('path/to/your/header.json'),
        footer: require('path/to/your/footer.json')
      }
    });
  }
};

gulp.task('templates', function() {
  gulp.src('./lib/*.html')
    .pipe(swig(opts))
    .pipe(gulp.dest('./dist/'))
});