Socket
Book a DemoInstallSign in
Socket

gulp-i18n

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gulp-i18n

A gulp plugin to compile language files using messageformat

latest
Source
npmnpm
Version
1.0.5
Version published
Weekly downloads
3
Maintainers
1
Weekly downloads
 
Created
Source

gulp-i18n

NPM

Build Status Dependency Status devDependency Status

Compile json files using messageformat.js.

Install

npm install --save-dev gulp-i18n

Example

  • Create json files 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.html

Example 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');

Gulp.task('i18n', () => {

  Gulp.src('i18n/**/*.json')
    .pipe(I18n())
    .pipe(Gulp.dest('www/i18n/'));
});

Run task with gulp:

$ gulp i18n

3. 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>

Keywords

gulpplugin

FAQs

Package last updated on 14 Sep 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts