运行 Angular i18n时如何设置messages.xlf输出位置?
How to set the messages.xlf output location when running Angular i18n?
我正在使用 angular's i18n tools 并已按照建议将 messages.xlf 输出移动到与默认位置不同的文件夹(新目录:\app\locale
)。
当我重新运行时
>npm run i18n
即使在新添加的app/locale目录下,messages.xlf
文件输出到默认位置
如何指定输出 messages.xlf
文件的输出位置以防止每次重新生成它时都必须移动它?
这个有用吗?感觉不仅仅是一个简单的代码示例
http://rolandoldengarm.com/index.php/2016/10/17/angular-2-automated-i18n-workflow-using-gulp/
这个答案的有用方面是 Roland Oldengarm 的 gulp 命令,它获取 i18n 的输出并自动合并到指定的语言环境 messages.xlf 文件中:
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 sourceElements = [];
gulp.task('i18n-get-source', function() {
return gulp.src('./src/i18n/messages.en.xlf')
.pipe(cheerio({
run: function ($, file) {
$('trans-unit').each(function() {
sourceElements.push($(this));
});
},
parserOptions: {
xmlMode: true
}
}));
});
gulp.task('i18n-merge-to-translations', ['i18n-get-source'], function() {
var languages = ['zh'];
var tasks = [];
for(var language of languages) {
var path = "./src/i18n/messages." + language + ".xlf";
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(sourceElement);
}
}
// 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) {
console.log("REMOVING");
// remove it
$('#' + id).remove();
}
}));
} ,
parserOptions: {
xmlMode: true
}
}))
.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() {
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('messages.en.xlf'))
.pipe(gulp.dest("./src/i18n"))
});
您可以向 tsconfig.json 添加一个新选项来告诉 angular 编译器将文件输出到哪里。
{
"compilerOptions": {
//your normal options...
},
"angularCompilerOptions": {
"genDir": "./app/locale"
}
}
当您执行 i18n 程序时,确保包含 tsconfig.json 位置。
node_modules\.bin>ng-xi18n -p ../../src/tsconfig.json
我正在使用 angular's i18n tools 并已按照建议将 messages.xlf 输出移动到与默认位置不同的文件夹(新目录:\app\locale
)。
当我重新运行时
>npm run i18n
即使在新添加的app/locale目录下,messages.xlf
文件输出到默认位置
如何指定输出 messages.xlf
文件的输出位置以防止每次重新生成它时都必须移动它?
这个有用吗?感觉不仅仅是一个简单的代码示例 http://rolandoldengarm.com/index.php/2016/10/17/angular-2-automated-i18n-workflow-using-gulp/
这个答案的有用方面是 Roland Oldengarm 的 gulp 命令,它获取 i18n 的输出并自动合并到指定的语言环境 messages.xlf 文件中:
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 sourceElements = []; gulp.task('i18n-get-source', function() { return gulp.src('./src/i18n/messages.en.xlf') .pipe(cheerio({ run: function ($, file) {
$('trans-unit').each(function() {
sourceElements.push($(this));
});
},
parserOptions: {
xmlMode: true
}
}));
});
gulp.task('i18n-merge-to-translations', ['i18n-get-source'], function() {
var languages = ['zh'];
var tasks = [];
for(var language of languages) {
var path = "./src/i18n/messages." + language + ".xlf";
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(sourceElement);
}
}
// 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) {
console.log("REMOVING");
// remove it
$('#' + id).remove();
}
}));
} ,
parserOptions: {
xmlMode: true
}
}))
.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() {
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('messages.en.xlf'))
.pipe(gulp.dest("./src/i18n"))
});
您可以向 tsconfig.json 添加一个新选项来告诉 angular 编译器将文件输出到哪里。
{
"compilerOptions": {
//your normal options...
},
"angularCompilerOptions": {
"genDir": "./app/locale"
}
}
当您执行 i18n 程序时,确保包含 tsconfig.json 位置。
node_modules\.bin>ng-xi18n -p ../../src/tsconfig.json