i18n don't work

[mpodciwinski]

Hello,
trying to use the i18n module to write files in individual languages using .json files.

Unfortunately, I can not do it. Partial works, but json data not.

This is my gulp settings:

var gulp = require('gulp');
var hb = require('gulp-hb');
var through = require('through2');

gulp.task('hb:lang', function() {
 return gulp
  .src('./src/lang/**/*.json')
  .pipe(through.obj((file, enc, cb) => {
	const locale = file.stem;
	const data = {
	 locale: locale,
	 i18n: JSON.parse(file.contents.toString())
	};

	gulp
	 .src('./src/test.hbs')
	 .pipe(
	  hb()
		.partials('./src/include/**/*.hbs')
		.data(data)
	 )
	 .pipe(gulp.dest('./dist/' + locale))
	 .on('error', cb)
	 .on('end', cb);
  })
 );
});

sample json files:

{
 "title": "ENG",
 "test": "ENG <br /> 2015",
 "list": [
  {
   "url": "eng.html",
   "title": "Wpis 1 [ENG]",
   "test": ["test 1 [ENG]", "test 2 [ENG]", "test 3 [ENG]"]
  },
  {
   "url": "eng.html",
   "title": "Wpis 2 [ENG]",
   "test": ["test 4 [ENG]", "test 5 [ENG]", "test 6 [ENG]"]
  }
 ]
}

test.hbs

<h1>{{ title }}</h1>
<div>
   <!-- Website content -->
</div>
<div>{{{ test }}}</div>

{{#each list}}
   <li>
      <a href="{{ url }}">{{ title }}</a>
   </li>
{{/each}}

my tree:

├── dist
├── src
│   ├── include
│   │   ├── partial.hbs
│   ├── lang
│   │   ├── en.json
│   │   ├── pl.json
│   ├── test.hbs

and this is what I receive:
tree:

├── dist
│   ├── undefinded
│   │   ├── test.hbs

dist/undefinded/test.hbs

<h1></h1>
<div>
   <!-- Website content -->
</div>
<div></div>

What I'm doing wrong? please help

[Shannon Moeller]

The first issue I see is that you'll always get test.hbs files as output. You'll want to use something like gulp-rename to get what you're hoping for from .pipe(gulp.dest('./dist/' + locale)).

The second issue is that it would appear locale is undefined, which is why you're getting an undefined directory in your output. I recommend using the hb({ debug: true }) flag to make sure your data is registered as you expect.

[mpodciwinski]

it receives:

  test.hbs
    global data:
      i18n    locale
    local data:

    decorators:
      inline
    helpers:
      blockHelperMissing  helperMissing       log                 unless
      each                if                  lookup              with
    partials:
      head

are you able to correct my gulp configurations?

[Shannon Moeller]

I wish I had the time, but the best I can do at the moment is point you to other issues where this exact pattern is addressed.

#51

You’re super close. You just need gulp-rename and to update your template to use {{ i18n.title }} instead of {{ title }}, etc.

Good luck!

[Shannon Moeller]

Looks like my past self has you covered:

https://github.com/shannonmoeller/tmp

[mpodciwinski]

it works now, thanks a lot!

Is it possible to save the resulting files in separate folders?

example:
Data .json files:

├── Data
│   ├── en
│   │   ├── index.json
│   │   ├── products.json
│   ├── de
│   │   ├── index.json
│   │   ├── products.json

Html output:

├── Dist
│   ├── en
│   │   ├── index.html
│   │   ├── products.html
│   ├── de
│   │   ├── index.html
│   │   ├── products.hrml

[Shannon Moeller]

Awesome! So glad to hear it.

You totally can. gulp-rename accepts a dirname property you can use for that:

.pipe(rename({
    dirname: "main/text/ciao",
    basename: "aloha",
    prefix: "bonjour-",
    suffix: "-hola",
    extname: ".md"
  }))