How do I pull multiple JSON files into SWIG on Node.js?

Question

This is actually two questions...

I have a single SWIG template (index.html) that I would like to pull multiple JSON files into for compiling using Node.js. An "index.json" file with variables that pertain just to that page, then a "common.json" file that contains a set of common variables that I would like to use across the entire system.

I also then have a "header.html" template and a "footer.html" template inside "index.html". How would I get them to each pull their own "header.json" and "footer.json" files respectively?

Ultimately, I am trying to get this all working within GULP-SWIG since we already have a GULP process running at all times for the rest of the project.

UPDATE: GULP-SWIG automatically looks for a JSON file with the same name and processes it, but there is no documentation on including additional JSON files.

I tried it this way:

// 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']);

And I tried it this way:

// 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']);

I have created a ZIP file containing the required file structure: https://www.dropbox.com/s/psxsdn31rd5177h/Gulp-Swig%20Sample.zip

The gulpfile.js file is the ONLY file that should need to be updated.

Answer 1

require them

You can just require the json files and pass them as local variables to swig

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

Supossing you are...

"including" your header and footer templates as partials, i.e.

index.swig.html

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

They will receive all the local variables, unless you specify a with *whatever* only statement. Check the include docs for further understanding.

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

You can...

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