未加星标

Angular 2: Automated i18n workflow using gulp

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

i18n (internationalization) support for Angular 2 is now built-in the framework. Previously we used ng2-translate, but I found it time-consuming to add all translations manually to the .json files. Since a week or so the documentation is also available at Angular.io . While useful, it did not provide information, it involves a lot of manual steps. I’m going to provide a set of Gulp tasks that will automate everything!

The following steps are required for i18n in Angular2:

Add i18n attributes to your components HTML Run “ng-xi18n” to generate an .XLF file with all translations Copy this file to all of your languages. Optional: For your default language (e.g. English), copy all source elements to the target as they should be the same. Create a .ts file which exports the contents of the XLF file as a string

Steps 2 and 4 have to be done every time you make a change to an existing i18n element, or add a new one! As I hate manual steps, I’ve transformed this into a set of Gulp tasks. The final result is one gulp task “i18n-build” that runs the following sequence:

// this task will generate the xlf file, re-creates the default English translation file, copy to i18n folders, and then
// add missing translations to all translations
gulp.task('i18n-build', function() {
runSequence('i18n-extract-xlf', 'i18n-default','i18n-merge-to-translations', 'i18n-xlf2ts');
}); i18n-extract-xlf runs the i18n-build tool i18n-default copies the generated messages.xlf to messages.en.xlf, and copies all source values to the target elements i18n-merge-to-translations copies the modifed/added elements to all translations. We can’t just overwrite existing translations as that will overwrite already made translations; we just need to append missing elements. We also need to remove obsolete elements from the translation files 18n-xlf2ts generates TS files that exports the contents of the XLF file as a string.

So now every time we make an update to an existing i18n element, or add a new one, we only need to run “gulp i18n-build”, and everything works again! At regular intervals we send the xlf file for Chinese (in our case) to our translators.

I’m using a couple of gulp plugins, you’ll need to add as devDependencies with:

npm i --save-dev gulp-cheerio gulp-modify-file gulp-rename gulp-run merge-stream run-sequence

The final set of gulp tasks:

var gulp = require('gulp');
var rename = require("gulp-rename");
var modifyFile = require('gulp-modify-file');
var cheerio = require('gulp-cheerio');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var del = require('del');
var zip = require('gulp-zip');
var mergeStream = require('merge-stream');
gulp.task('i18n-merge-to-translations', function() {
var languages = ['zh'];
var tasks = [];
for(var language of languages) {
var path = "./src/i18n/messages." + language + ".xlf";
var sourceElements = [];
tasks.push(gulp.src('./src/i18n/messages.en.xlf')
.pipe(cheerio({
run: function ($, file) {
$('trans-unit').each(function() {
sourceElements.push($(this));
});
},
parserOptions: {
xmlMode: true
}
}))
.pipe(rename(path)));
tasks.push(gulp.src(path)
.pipe(cheerio({
run: function ($, file) {
var sourceIds = [];
for (var sourceElement of sourceElements) {
var id = $(sourceElement).attr('id');
sourceIds.push(id);
var targetElement = $('#' + id);
if (targetElement.length == 0) {
// missing translation
$('body').append(targetElement);
}
}
// now remove all redundant elements (i.e. removed)
$('trans-unit').map((function() {
var id = $(this).attr('id');
var existing = sourceIds.find((item) => { return item == id} );
if (!existing) {
// remove it
$('#' + id).remove();
}
}));
}
}))
.pipe(gulp.dest('./src/i18n')));
}
return mergeStream(tasks);
})
// run ng-xi18n
gulp.task('i18n-extract-xlf', function() {
return run('ng-xi18n').exec();
});
// create .ts files for all .xlf files so we can import it
gulp.task('i18n-xlf2ts', function () {
return gulp.src("./src/i18n/*.xlf")
.pipe(rename(function (path) {
path.extname = ".ts"
}))
.pipe(modifyFile(function (content, path, file) {
var filename = path.replace(/^.*[\\\/]/, '')
var language = filename.split(".")[1].toUpperCase();
return "export const TRANSLATION_" + language + " = `" + content + "`;";
}))
.pipe(gulp.dest("./src/i18n"));
});
// copy all source values to the target value as a default translation and make that our English translation
gulp.task('i18n-default', function() {
var path = "./src/i18n/messages.en.xlf";
return gulp.src('./messages.xlf')
.pipe(cheerio({
run: function ($, file) {
// Each file will be run through cheerio and each corresponding `$` will be passed here.
// `file` is the gulp file object
$('source').each(function() {
var source = $(this);
var target = source.parent().find('target');
//source.text(source.text().toUpperCase());
target.html(source.html());
});
},
parserOptions: {
xmlMode: true
}
}))
.pipe(rename(path));
});

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: GulpHTMLTI
分页:12
转载请注明
本文标题:Angular 2: Automated i18n workflow using gulp
本站链接:http://www.codesec.net/view/483623.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(28)