2017-09-03 5 views
1

프로젝트를 사용하고 있습니다. 각 1.모서리로 각을 번역으로 프로젝트를 국제화하고 있습니다.HTML 및 JS 파일의 번역본 추출

각도-번역 좀 텍스트처럼 추가하면, 구성 및 작동, 설치을 :

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

수동이 파일로 "테스트"를 추가 es.jsonen.json, 각도는 문제없이 키를 번역합니다.

이제 HTML 및 JS 파일에서 모든 번역 된 키를 추출하는 과정을 자동화하려고합니다.

내가 주위를 파고 봤는데

발견이 2 개 패키지 :

  • 꿀꺽 - 각도 - 번역 - 추출물
  • 꿀꺽 - 각도 - 번역 - 추출

gulpfile.js에는 "watch"라는 태스크가 있으며,이 작업은 JS & HTML 파일에서 변경 사항을 확인합니다. 내 아이디어는 시계 작업 내에서 호출되는 다른 작업 "번역"을하는 것입니다.

위에서 언급 한 2 개의 라이브러리를 사용하여 "번역"작업을 만들려고했습니다. 나는 그 라이브러리들로 몇 가지 구성을 시도했지만 번역본을 추출한 라이브러리는 en.json & 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.jsonen.json

  • 에 추가되지 않습니다 의미, 추출되지 않습니다? 여분의 꿀꺽 꿀꺽한 음식을 놓치고 있습니까?

답변

0

해결!상대 경로의 주요 문제 나는 그것이 패키지를 사용하여 작동하도록 관리 꿀꺽 - 각도를-번역 - 추출

을 것 같다 있었다 : 나는 다음 경로를 사용하도록 구성을 업데이트

# 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' 
};