gulp-i18n-messageformat
v1.1.2
Published
A fork from gulp-i18n adding options to compile language files using messageformat.
Downloads
7
Maintainers
meezioReadme
gulp-i18n-messageformat
Compile json files using messageformat.js.
Install
npm install --save-dev gulp-i18n-messageformatExample
- Create
jsonfiles with translations - Build with
gulp - Load appropriate script in browser
1. Create json files with translations
Example file structure:
.
├── gulpfile.js
├── i18n
│ ├── en
│ │ ├── inicio.json
│ │ └── menu.json
│ └── es
│ ├── inicio.json
│ └── menu.json
├── package.json
└── www
├── i18n
│ ├── en.js
│ └── es.js
└── index.htmlExample i18n/en/menu.json file:
{
"ubicación": "Location",
"instalaciones": "The House",
"actividades": "Ammenities",
"galería": "Gallery",
"contacto": "Contact"
}2. Build with gulp
In your gulpfile.js:
'use strict';
const Gulp = require('gulp');
const I18n = require('gulp-i18n-messageformat');
Gulp.task('i18n', () => {
Gulp.src('i18n/**/*.json')
.pipe(I18n())
.pipe(Gulp.dest('www/i18n/'));
});Run task with gulp:
$ gulp i18n3. Load appropriate script in browser
<html>
<body>
<script>
var locale = localStorage.getItem('locale') || 'es';
$('<script>')
.attr('src', '/i18n/' + locale + '.js')
.appendTo('body');
// You can now use the global `i18n` object.
console.log(window.i18n.menu['ubicación']());
// This would show "Ubicación" or "Location" depending on
// selected `locale`.
</script>
</body>
</html>4. Options
Regular Expressions can be used for custom paths.
.
├── gulpfile.js
├── module1
│ └── i18n
│ ├── en.json
│ └── es.json
├── module2
│ └── i18n
│ ├── en.json
│ └── es.json
├── package.json
└── www
├── i18n
│ ├── en.js
│ └── es.js
└── index.html'use strict';
const Gulp = require('gulp');
const I18n = require('gulp-i18n-messageformat');
Gulp.task('i18n', () => {
Gulp.src('*/i18n/*.json')
.pipe(I18n({
locale: '^.*\/(.*)\.json$',
namespace: '^(.*)\/i18n\/.*\.json$'
}))
.pipe(Gulp.dest('www/i18n/'));
});console.log(window.i18n.module1['ubicación']());