Question

我有一个项目，我使用 Angular 1.6 ，我使用 angular-translate 来国际化该项目。

Angular-translate 已安装，配置并正常工作，如果我添加一些文字，如：

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

和手动添加键＆＃34;测试＆＃34;进入文件 es.json 和 en.json ，Angular可以毫无问题地翻译密钥。

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

我一直在挖掘并发现这2个包裹：

吞-角翻译提取物
吞-角平移-提取

我的 gulpfile.js 有一个名为＆＃34; watch＆＃34;的任务，此任务正在观看JS＆amp;用于更改的HTML文件。我的想法是完成另一项任务＆＃34;翻译＆＃34;在监视任务中调用。

我尝试创建任务＆＃34;翻译＆＃34;与上面提到的2个库。我尝试了这些库的几个配置，但这些库都没有提取翻译并将它们添加到en.json＆amp; es.json。

这是我尝试过的一些小例子：

吞掉-角翻译提取物

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: '',
        }))
});

吞掉-角平移-提取

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＆amp;中提取翻译JS文件

1 个答案: