Handlebars compiles an empty template without data running inside Gulp task

Question

I am running a simple gulp task that is supposed to render my handlebars template version in a specific language. The language data is stored in a JSON file and i require that dynamically inside a gulp pipe task I store that in a variable and then the handlebars task executes.

gulp.task('compilen', () => {
var strings;


return gulp.src('frontend/templates/*/*.hbs')
.pipe(through.obj(function(file,enc,cb){
    var p = parsePath(file.relative);

    strings = require('./frontend/templates/' + p.dirname+ '/locales/en.json');

    console.log(strings);

     cb(null,file);
}))
.pipe(handlebars(strings, options))
.pipe(rename(function(path){


    path.basename += "-en";
    path.extname = ".html";

}))
.pipe(gulp.dest('build'));

});

Whenever I run gulp everything runs and it outputs a file without the strings data. The {{ }} are removed but there is no actual data as if the strings object were empty but that is not the case since whenever I wrap the handlebars function with tap and console.log the values they all there.. What is even more strange is that instead of the strings variable if I were to pass an object literal, everything renders correctly.

here is a sample hbs template and my json file

main.hbs

{{> header}}

<div>
  {{home.title}}
</div>

en.json

{
    "home" : {
    "title" : "hello world",
    "heading" : "1245"
    }
 }

the main.html output

<div>

</div>
<div>

</div>

Answer 1

I solved this by using yet another plugin gulp-data reference in the bottom of the docs. I replaced through.obj with the gulp-data object and it works now. I've been struggling to much trying to do simple things with gulp so my advice is to stay away.