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

Posted 2023-02-16

【中文标题】如何在 Node.js 上将多个 JSON 文件拉入 SWIG？

【英文标题】：How do I pull multiple JSON files into SWIG on Node.js?

【发布时间】：2014-05-20 18:18:39

【问题描述】：

这其实是两个问题……

我有一个 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 文件是唯一需要更新的文件。

【参考方案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
);

假设你是……

“包括”您的页眉和页脚模板作为部分模板，即

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 %
# ... #

【讨论】：

感谢您的快速回复。在过去的几个小时里，我试图将您的解决方案折叠到 GULP-SWIG 中，但无法使其正常工作。我已经用到目前为止的内容更新了这个问题。

【参考方案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/'))
);