Extract translations from HTML & JS files

Question

I have a project where I'm using Angular 1.6 and I'm using angular-translate to internationalize the project.

Angular-translate is installed, configured and working, If I add some text like:

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

and manually add the key "Test" into the files es.json and en.json, Angular translate the keys without problems.

Now I'm trying to automatize the process of extracting all the translated keys from the HTML and JS files.

I've been digging around and found this 2 packages:

• gulp-angular-translate-extract
• gulp-angular-translate-extractor

My gulpfile.js has a task called "watch", this task is watching the JS & HTML files for changes. My idea is to have another task "translation" that is called within the watch task.

I tried to create the task "translation" with the 2 libraries mentioned above. I tried several configurations with those libraries but none of those libraries extracted the translations and added them into en.json & es.json.

This are small examples 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'];  // 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));
});

With the above configuration the translation task is called every time I modified an HTML or JS file, but the translation keys are not extracted, I mean the keys of the translations are not automatically added to the es.json and en.json

• What am I missing here ? Am I missing some extra gulp configuration ?

Answer 1

Solved ! I manage to make it works using the package gulp-angular-translate-extractor

It seems the main issue there was the relative paths:

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

# Dest paths
./src/app/locale

I update the configuration to use the next paths and the translations are extracted without problems:

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));
});

The main difference with the code of my question is that I used the next paths:

# 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')

Being the variable conf.paths.src like:

conf.js

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