Currently, I am working on a project using Angular 1.6 and incorporating angular-translate for internationalization.
The setup for Angular-translate is complete and functioning properly. When I manually include text like:
{{'Test' | translate}}
<span translate>Test</span>
and add the translation key "Test" to both es.json and en.json, Angular translates the keys seamlessly.
Now, my goal is to automate the process of extracting all translated keys from HTML and JS files.
In my research, I came across two packages:
- gulp-angular-translate-extract
- gulp-angular-translate-extractor
Within my gulpfile.js, I have a task named "watch" that monitors changes in JS & HTML files. My plan is to incorporate another task called "translation" within the watch task.
I attempted to create this "translation" task using the aforementioned libraries, but none of them successfully extracted translations and added them to en.json & es.json.
Here are snippets of what I tried:
gulp-angular-translate-extract
var angularTranslate = require('gulp-angular-translate-extract');
gulp.task('translate', function () {
return gulp.src(['./src/app/**/*.html', './src/app/**/*.js'])
.pipe(angularTranslate({
lang: ['en', 'es'],
dest: 'src/app/locale/',
suffix: '.json',
prefix: '',
}))
});
gulp-angular-translate-extractor
var extractTranslate = require('gulp-angular-translate-extractor');
gulp.task('taskName', function () {
var i18nsrc = ['./src/app/**/*.html', './src/app/**/*.js'];
var i18ndest = './src/app/locale';
return gulp.src(i18nsrc)
.pipe(extractTranslate({
defaultLang: 'en',
lang: ['en', 'es'],
dest: i18ndest,
prefix: '',
suffix: '.json',
safeMode: false,
stringifyOptions: true,
}))
.pipe(gulp.dest(i18ndest));
});
Despite implementing the above configurations, the extraction task runs when I modify an HTML or JS file, but the translation keys are not being extracted automatically into es.json and en.json.
- What could be missing in my approach? Do I need additional gulp configurations?