2

这其实是两个问题...

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

4

2 回答 2

3

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语句。检查包含文档以进一步了解。

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

你可以...

require all your json files and pass them as local variables, specifying the objects you want to pass into.

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
});

And on index.swig.html...

{# ... #}
{% include "header.swig.html" with header only %}
{# ... #}
{% include "footer.swig.html" with footer only %}
{# ... #}
于 2014-05-20T18:36:43.737 回答
1

You can use the setup option in gulp-swig which gives you direct access to the swig object. Once you have access, you can read the Swig documentation on how to pass data. Here's an example:

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/'))
});
于 2014-05-28T23:54:58.773 回答