使用“gulp-translate-html”和“gulp-inject”时的 Gulp 管道和缓存问题

Question

我有一个项目，我必须生成翻译后的静态页面。 之所以选择使用 gulp，是因为它在缩小资源、监视文件更改和重新编译方面有很大帮助，并且还可以在多个页面中注入 html 模板。

我用过：
- 'gulp-inject': 用于将模板插入最终文件
- 'gulp-translate-html'：用于翻译，因为我有 '.json' 字典

所以我有两个问题：

1. 'gulp-translate-html'

这使用 json 作为输入进行翻译，使用以下代码：

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

我在“.json”文件上创建了一个监视，修改后应该重新应用翻译。但不知何故，它使用旧文件而不是修改后的文件。 有解决方法吗？或者我可以用于 json 文件的其他插件？

1. 'gulp-inject' 在上面的代码示例中，我只翻译了一个文件。但是我需要为几种具有不同目的地的语言这样做，所以我为这些语言使用了一个循环。（对不起代码缩进）

   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']);
   

在这里，我希望在“翻译”任务之前运行“注入内容”任务，但后者运行得太快了。发生这种情况是因为“injectContent”中没有特定的返回 gulp 回调，对吧？

如何合并结果而不让任务插入？

Answer 1

刚刚从第 1 点找到了缓存问题的解决方案：

基于这个答案：https://stackoverflow.com/a/16060619/944637 我删除了缓存，然后“require”函数可以从文件系统而不是缓存中重新加载文件。

我在“翻译”任务的开头添加了delete require.cache[require.resolve('./dictionary/en.json')];，然后返回。

编辑：刚刚在第 2 点找到了使用“合并流”合并结果的解决方案，在此答案中：https://stackoverflow.com/a/26786529

所以我的代码原来是这样的：

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