npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-i18n-extract

v1.0.13

Published

Extracts I18N data from html pages.

Downloads

36

Readme

gulp-i18n-extract

NPM version

This gulp tasks extracts i18n keys and texts from HTML and JSON files.

This task ist part of the i18n toolchain:

  1. [Tag](to be implemented) text nodes in HTML with an i18n key attribute
  2. Extract i18n keys and values (This task)
  3. Translate
  4. Compile into language files for i18n like Aurelia-i18n

Installation

Install gulp-i18n-extract using npm into your local repository.

npm install gulp-i18n-extract --save-dev

Usage

Setup a gulp task i18n-extract. By default, this job will only extract data from html files.

var gulp = require('gulp');
var i18n = require('gulp-i18n-extract');

var options = {};

gulp.task('i18n-extract', function() {
  return gulp.src("src/**/*.html")
             .pipe(i18n.extract("./lang/language.json",options))
             .pipe(gulp.dest("."));
});

Options

  • outFile : string = 'i18nextract.json'

    Output file name.

  • plugIns : object[] = [ new i18n.html("t") ]

    Specify, which plug-in should be used on extraction.

  • markUpdates : boolean = true

    If an extracted value has been changed or added, it will be marked with "needsUpdate":true .

  • defaultLanguages : string[] = ["de"]

    Each default language will be added as translation, if missing.

  • warnOnDuplicates : boolean = true

    Created warnings if i18n keys are used twice.

  • keepObsoleteTranslations : boolean = 'false'

    All translations from obsolete or deleted key will remain in the extract file as obsoleteTranslations. These texts will be grouped by the extracted content and contain all found translations.

##Output structure

{
	"<filename w/o ext>": {
		"src":"<relative file path>",
		"content": {
			"<i18n key>": {
				"content":"<extracted content>",
				"lastModified":"<date of extraction>",
				"translations": {
					"<language, 2letter iso>" : {
						"content":"<translated content>",
						"lastModified":"<date of translation>"
					}
				},
				"needsUpdate":"<boolean>"
			}
		}
	},
	"obsoleteTranslations": [
		{
			"key":"<original text>",
			"translations":{
				"<language, 2letter iso>": [
					"<found translation for original text>",
					"<found translation for original text>",
					...
				]
			}
		}
	]
}

PlugIns

There are two predefined plugins available to handle html and json files.

HTML

You can specify the attribute that is used to identify localizable strings. (Default: "t")

var options = { plugIns:[ new i18n.html("t") ] };  

Examples:

  • Extract the inner text
<h1 t="index.title">Welcome</h1>
  • Extract attributes
<input type="email" placeholder="Email" t="[placeholder]index.email">
  • Inner text and attributes
<span data-toggle="tooltip" data-placement="right" title="Tooltip" 
      t="[text]index.example;[title]index.exampleTooltip">
	  Example text
</span>
  • Skip extraction of certain keys by providing ignore function in the second argument. In the following example, index.${variable} is not extracted.
var options = { plugIns:[ new i18n.html("t", (key) => key.indexOf("${") >= 0) ] };  
<input type="email" placeholder="Ignored for extraction" t="[placeholder]index.${variable}">

JSON

You can specify the file extension for your json files. (Default: ".r.json")

var options = { plugIns:[ new i18n.json(".r.json") ] }; 	  

Custom PlugIn

A plugin has to provide two functions: canHandle and parse.

canHandle will be called to determine, if the plugin can extract tokens out of the given file.

parse implements the extraction and will receive the file and an addToken function.

var customPlugIn = {		
		canHandle : function(fileName) {			
			return true || false;
		},
		
		parse: function (file, addToken) {			
			addToken("i18nKey","extracted text");					
		}	
	}
	
var options = { plugIns:[ customPlugIn ] }; 

License

Apache 2.0