Gulp pipe and caching issue when using “gulp-translate-html” and “gulp-inject”

Question

I have a project where I have to generate translated static pages. The choice was to use gulp because it helps a lot in minifying resources, watch for file changes and re-compile, and can also inject html templates in several pages.

I used:
- 'gulp-inject': for inserting templates into final files
- 'gulp-translate-html': for translating because I have '.json' dictionaries

So I have two issues:

1. 'gulp-translate-html'

This uses the json as input for translating, using the following code:

 gulp.task('translate', function() {
            return gulp.src('./temp/en/template.html')
                .pipe(translateHtml({
                    messages: require('./dictionary/en.json'),
                    templateSettings: {
                        interpolate: /{{([\s\S]+?)}}/g
                    }       
                }))
                .pipe(gulp.dest('./en'));
    });

I created a watch on the '.json' file, when modified, it should re-apply the translation. But somehow it uses the old file instead of the modified one. Is there a workaround for this? Or other plugin that I could use for the json files?

2. 'gulp-inject' In the code-sample above, I translated only one file. But I need to do so for several languages that have different destinations, so I used a loop for the languages.(sorry for the code indentation)

    var gulp = require('gulp'), inject = require('gulp-inject'), translateHtml = require('gulp-translate-html'); var languages = ['en', 'de']; gulp.task('injectContent', function() { /* the base file used as a reference*/ var target = gulp.src('./templates/base/baseTemplate.html'); /* get each language*/ languages.forEach(function(lang) { target.pipe(inject(gulp.src('./templates/partials/injectTemplate.html'), { relative: true, starttag: '<!-- inject:template -->', transform: function (filePath, file) { return file.contents.toString('utf8'); } })) /* put the merged files into "temp" folder under its language folder*/ .pipe(gulp.dest('./temp/'+lang)); }); }); /* The translation has to be made after the injection above is finished*/ gulp.task('translate', ['injectContent'] function() { /* get each language*/ languages.forEach(function(lang) { gulp.src('./temp/'+ lang +'/baseTemplate.html') .pipe(translateHtml({ messages: require('./dictionary/'+lang+'.json');, templateSettings: { interpolate: /{{([\\s\\S]+?)}}/g } })) .pipe(gulp.dest('./'+lang)); /* put file in the "en" or "de" language folder*/ }); }); gulp.task('watch', function() { gulp.watch(['./templates/**/*.html', './dictionary/*.json'], ['translate']); }); gulp.task('default', ['translate', 'watch']); 

Here I want the 'injectContent' task to be ran before the 'translation' task, but the latter runs too soon. This happens because there is not a specific return gulp callback in the 'injectContent', right?

How can I merge the results and not let the tasks intercalate?

Answer 1

Just found a solution for the caching issue from point 1:

Based on this answer: https://stackoverflow.com/a/16060619/944637 I deleted the cache and then the "require" function could reload the file from the filesystem and not from cache.

I added delete require.cache[require.resolve('./dictionary/en.json')]; at the beginning of the 'translate' task, before return.

EDIT: Just found the solution on Point 2 to merge the results using "merge-stream", in this answer here: https://stackoverflow.com/a/26786529

so my code turned out to be like this:

   ....
    merge = require('merge-stream');
    gulp.task('injectContent', function() {
            var tasks = languages.map(function(lang){
                return gulp.src('./templates/base/injectContent.html')
                .pipe(plumber())
                .pipe(debug())
                .pipe(inject(gulp.src('./templates/partials/injectTemplate.html'), {
                    relative: true,
                    starttag: '<!-- inject:release -->',
                    transform: function (filePath, file) {
                        return file.contents.toString('utf8');
                    }
                }))
                .pipe(gulp.dest('./temp/'+lang));
            });
        return merge(tasks);
    });

    gulp.task('translate', ['injectContent'], function() {

        for (var i in languages) {
            var lang = languages[i];

            delete require.cache[require.resolve('./dictionary/'+lang+'.json')];

            gulp.src('./temp/'+lang+'/injectContent.html')
                .pipe(plumber())
                .pipe(debug())
                .pipe(translateHtml({
                    messages: require('./dictionary/'+lang+'.json'),
                    templateSettings: {
                        interpolate: /{{([\s\S]+?)}}/g // this is for Angular-like variable syntax
                    }       
                }))
                .pipe(gulp.dest('./'+lang));
        }
    });
....