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

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

Answer 2

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