从 HTML 和 JS 文件中提取翻译

Question

我有一个项目，我正在使用 Angular 1.6 并且我正在使用 angular-translate 使项目国际化。

Angular-translate 已安装、配置和工作，如果我添加一些文本，如：

{{'Test' | translate}}
<span translate>Test</span>

和手动将键"Test"添加到文件es.json 和 en.json, Angular 翻译键没有问题。

现在我正在尝试自动化从 HTML 和 JS 文件中提取所有已翻译密钥的过程。

我一直在四处寻找并找到了这 2 个包：

gulp-angular-翻译-摘录
gulp-angular-翻译提取器

我的 gulpfile.js 有一个名为 "watch" 的任务，这个任务正在观察 JS 和 HTML 文件的变化。我的想法是在监视任务中调用另一个任务 "translation"。

我尝试使用上面提到的 2 个库创建任务 "translation"。我尝试了这些库的几种配置，但是这些库中的 none 提取了翻译并将它们添加到 en.json & es.json.

这是我尝试过的小例子：

gulp-angular-翻译-摘录

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-翻译提取器

var extractTranslate = require('gulp-angular-translate-extractor');

gulp.task('taskName', function () {
  var i18nsrc = ['./src/app/**/*.html', './src/app/**/*.js'];  // your source files  
  var i18ndest = './src/app/locale'; //destination directory
  return gulp.src(i18nsrc)
      .pipe(extractTranslate({
        defaultLang: 'en',         
          lang: ['en', 'es'],
          dest: i18ndest,
          prefix: '',
          suffix: '.json',
          safeMode: false,
          stringifyOptions: true,
      }))
      .pipe(gulp.dest(i18ndest));
});

使用上述配置，每次我修改 HTML 或 JS 文件时都会调用翻译任务，但 不会提取翻译密钥 ，我的意思是密钥的翻译不会自动添加到 es.json 和 en.json

我在这里错过了什么？我是否缺少一些额外的 gulp 配置？

Answer 1

已解决！我设法使用 gulp-angular-translate-extractor

包使其工作

似乎主要问题是相对路径：

# Source paths
./src/app/**/*.html
./src/app/**/*.js

# Dest paths
./src/app/locale

我更新了配置以使用下一个路径并且翻译被提取没有问题：

var extractTranslate = require('gulp-angular-translate-extractor');

gulp.task('translate', function () {
  var i18nsrc = [path.join(conf.paths.src, '/app/**/*.html'), path.join(conf.paths.src, '/app/**/*.js')];  // your source files  
  var i18ndest = path.join(conf.paths.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));
});

与我的问题代码的主要区别是我使用了下一个路径：

# Source paths
path.join(conf.paths.src, '/app/**/*.html')
path.join(conf.paths.src, '/app/**/*.js')

# Dest paths
path.join(conf.paths.src, './src/app/locale')

作为变量 conf.paths.src 如：

conf.js

exports.paths = {
  src: 'src',
  dist: 'release',
  devDist: 'dev-release',
  tmp: '.tmp',
  e2e: 'e2e'
};

从 HTML 和 JS 文件中提取翻译

Extract translations from HTML & JS files

javascript

json

angularjs

gulp

angular-translate