gulp-i18n-pug

gulp-i18n-pug

Gulp plugin to compile Pug templates with internationalization support based on JS/JSON/YAML files

Inspired by grunt-pug-i18n.

It adds high level support for Pug template internationalization based on JSON/YAML/JS files.

How to install

$ npm install gulp-i18n-pug --save-dev

Usage

Example JSON locale file (es_ES.json)

{
  "hello": {
    "world": "Hola Mundo"
  }
}

Example Pug template

body
  h1 #{$i18n.hello.world}!
  p Using locale #{$localeName}

var pugI18n = require('gulp-i18n-pug');
gulp.task('pugI18n', function () {
  var options = {
    i18n: {
      dest: 'dist',
      locales: 'test/locales/*.*'
    },
    pretty: true
  };
  return gulp.src('myPugTemplates/directory/*.pug')
    .pipe(pugI18n(options))
    .pipe(gulp.dest(options.i18n.dest));
});

var pugI18n = require('gulp-i18n-pug');
gulp.task('pugI18n', function () {
  var options = {
    i18n: {
      locales: 'test/locales/*',
      namespace: '$t',
      localeExtension: true
    },
    client: false,
    pretty: true
  };
  return gulp.src('myPugTemplates/directory/*.pug')
    .pipe(pugI18n(options))
    .pipe(gulp.dest(options.i18n.dest));
});

var pugI18n = require('gulp-i18n-pug');
gulp.task('pugI18n', function () {
  var options = {
    i18n: {
      dest: '.tmp'
    },
    data: {
      $i18n: {
        message: 'Hello world!',
        nested: {
          msg: 'and hello to you'
        }
      }
    },
    pretty: true
  };
  return gulp.src('myPugTemplates/directory/*.pug')
    .pipe(pugI18n(options))
    .pipe(gulp.dest(options.i18n.dest));
});

Options

Only i18n specific options are listed below

locales

Type: string|array

Path to localization files. Please check the examples in tests. Glob patterns can be used

JSON, YAML and JS formats are supported for the translation templates

namespace

Type: string Default: $i18n

Namespace to expose translation keys in Pug template

localeExtension

Type: boolean Default: false

Generate the HTML output files with the extension prefix with the current language. By default it will create different folders for each language

Setting this option into true, the generated HTML files will look like this:

html/
├── view.en-en.html
└── view.es-es.html

... instead of:

html/
├── en-EN/
│   └── view.html
└── es-ES/
    └── view.html

Release History

Read the full changelog.

License

MIT © Felix Zapata

Changelog

1.0.3 (2018-03-26)

Bug Fixes

• index.js: use relative path with localeExtension default value (8d029f4)

<a name="1.0.2"></a>