Gulp task to translate JS

Question

I'm working on a JavaScript app and have so far entered all my strings as plain text.

This is starting to feel really hacky (I'm used to gettext) so I'd prefer to wrap them all in something like {{translatable_string}} and have a gulp task just search/replace them all during the build step.

So, my question is; is there a generic (no framework-specific like angular-gettext or something like that) gettext replacer out there?

Obviously it doesn't even have to be connected to JavaScript in any way, you should be able to run it on any file type and have {{translatable_string}}:s be translated.

Got to live these down voters who refuse to comment. What exactly is wrong with the question? — powerbuoy, Oct 24 '16 at 16:26

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

You may want to look into using gulp-replace. As they explained in this answer, you should be able to use it to find and replace any string that you want in the stream.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 19 '16 at 15:59

Jon

2,456
21
28

Ok thanks, I'm actually already using it for other tasks, but honestly it feels a little hacky to use it to do my entire translation... If no-one suggests something a little more robust I might end up using it. Preferably I'd like something that actually uses `.po` and `.mo` files as well. – powerbuoy Oct 19 '16 at 22:08

score 0 · Answer 2 · answered Oct 25 '16 at 07:18

I suggest a database of strings for your translations if dynamic generation of page content is possible for your app. Starting with English or whichever is normal but the need to localize content is a tough issue without a robust system. A simple MongoDB table can be used to store the content, and when the app needs an interface it can be loaded with the right localized strings. As a for instance:

if(err) alert("Please turn off caps lock");

could become:

if(err) alert(Please_turn_off_caps_lock.English);

If you are needing to build static pages with gulp, a database in conjunction with gulp-replace sounds interesting. Using gulp-data to call up and package the strings, you can then feed it to gulp-replace and alter the files. The extensible nature of databases or document stores enable you to expand your localization without hacking on individual files or trees all the time.

Thanks. I'm not really looking for a solution on how to store the text though, I thought I'd use `po`/`mo` files like normal. All I need is a gulp/npm module that handles search/replacing all the translation strings during the build step. I might end up using `gulp-replace` after all. It doesn't seem like there's anything properly gettext-related available. — powerbuoy, Oct 25 '16 at 08:41

score 0 · Answer 3 · answered Oct 26 '16 at 19:57

Try gulp-gettext-parser.

var gettext = require("gulp-gettext-parser");
var rename = require("gulp-rename");

gulp.task("gettext", function() {
   return gulp.src("src/**/*.js")
      .pipe(gettext())
      .pipe(rename("bundle.po"))
      .pipe(gulp.dest("dist/"));
});

score 0 · Answer 4 · answered Oct 28 '16 at 13:12

Perhaps what you need is mustache.js, take a look: https://github.com/janl/mustache.js/

I'm not used to work with mustache, but I had to do some updates in a project done with it, and I was surprised the capabilities it have.

If you're familiar with jade (now renamed to pug), you'll find is something similar but at the end, you're not forced to generate only html files, you cand generate any kind of text file.

This blog could be helpful to understand the differences between some other templating languages over Nodejs: https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/

Thanks. I'm not really looking to change template language though. That's why I specifically asked for a generic module that works regardless of filetype even (I should be able to run this thing on anything from js, CSS, html and even svg) — powerbuoy, Oct 28 '16 at 13:45

Gulp task to translate JS

4 Answers4