Bug with multiline string, only with gulp build

[gsemet]

Hello. I am not sure this is related to 54.

I see some html text not being translated on my prod environment. It doesn't occurs when serving with gulp serve.

Step to reproduce:

• use https://github.com/Swiip/generator-gulp-angular to generate a site
• Add a multiline string in a html template included using ng-include such as:

    <p translate>

      Lorem ipsum Occaecat eiusmod velit voluptate aute deserunt pariatur 
      cupidatat qui dolore sunt cillum sit veniam aliquip Duis.

    </p>

When the site is served with "gulp serve", all strings are well translated. But when the site is built, only strings on a single line are translated.

To make the previous example work, I have to do put the string into a single line:

    <p translate>

      Lorem ipsum Occaecat eiusmod velit voluptate aute deserunt pariatur cupidatat qui dolore sunt cillum sit veniam aliquip Duis.

    </p>

I am not sure why it doesn't work with "gulp build". I think the pot and po files are alright, but the injection into the production site doesn't work.I have disabled the call to "uglify" in the gulp task "html" that is responsible for joining all javascript together (the all html templates are compiled into ".tmp\partials\templateCacheHtml.js").

Live example: https://squirrel-staging.herokuapp.com/features (app can make lot of time to load) Source code: https://github.com/Stibbons/Squirrel

Appendix: Here is the gulp job I use as dependency of the "build" task:

    'use strict';

    var gulp = require('gulp');

    var paths = gulp.paths;

    var gettext = require('gulp-angular-gettext');

    gulp.task('pot', function() {
      return gulp.src([
          'src/index.html',
          'src/{app,components,services,modules}/**/*.html',
          'src/{app,components,services,modules}/**/*.js'])
        .pipe(gettext.extract('template.pot', {
          // options to pass to angular-gettext-tools...
        }))
        .pipe(gulp.dest('src/po/'));
    });

    gulp.task('translations', function() {
      return gulp.src([
          'src/po/**/fr.po',
        ])
        .pipe(gettext.compile({}))
        .pipe(gulp.dest('src/po/'));
    });

It works great during "gulp serve", the pot file is automatically updated on change on the source files, and the final html page is automatically updated when the translation is updated into the .po file with poedit.

Hope this helps, Regards G.

[gsemet]

More information about the current bug:

angular-gettext is not compatible with "gulp-minify-html" (minifyHtml filter). This ticket seems to be a duplicate of #183.

• why gulp serve works: my configuration includes the generated JS translation file directly within index.html. The html served from partial.html, is not minified. Here is how fr.po stores a multiline string such as described in my previous post:

fr.po:

msgid ""
"Lorem ipsum Occaecat eiusmod velit voluptate aute deserunt pariatur \n"
"      cupidatat qui dolore sunt cillum sit veniam aliquip Duis."
msgstr ""
"Lorem ipsum Occaecat eiusmod velit voluptate aute deserunt pariatur \n"
"      cupidatat qui dolore sunt cillum sit veniam aliquip Duis."

Now, fr.js is well adapted:

... "Lorem ipsum Occaecat eiusmod velit voluptate aute deserunt pariatur \n      cupidatat qui dolore sunt cillum sit veniam aliquip Duis ":"Lorem ipsum Occaecat eiusmod velit voluptate aute deserunt pariatur cupidatat qui dolore sunt cillum sit veniam aliquip Duis"

The "\n " is AMHO the key difference with production html. The prod html is cleaned

• However we see in the js generated after minification (in prod) doesn't have this "\n" appearing on the line.

Which minification filter do you recommend? Is there one that can minify all but the content of tags ("text()"). I can't find any working option to make "html minify" like angular-gettext.

I disabled minification for partials, and now gettext works.

[gsemet]

(seems gulp-html-minifier is my best new friend)

[pySilver]

what if you first minify and then extract translation strings? (yes, painful for development)

[gsemet]

it would minify the developement site. Why not, I think it can work. But I advise you to add a section in you documentation about this, since minifiy/uglify may have a strong impact on angular-gettext behavior.

It works with gulp-html-minify that can be configured so it doesn't change the inner text of the tags