使用“ gulp-translate-html”和“ gulp-inject”時的gulp管道和緩存問題

Question

我有一個項目，我必須在其中生成翻譯后的靜態頁面。 選擇使用gulp是因為它有助於最大程度地減少資源，監視文件更改和重新編譯，並且還可以在多個頁面中注入html模板。

我用了：
-'gulp-inject'：用於將模板插入最終文件
-'gulp-translate-html'：用於翻譯，因為我有'.json'字典

所以我有兩個問題：

1. '吞掉-翻譯-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文件的其他插件？

2. '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”任務，但是后者運行得太早了。 發生這種情況是因為'injectContent'中沒有特定的返回gulp回調，對嗎？

如何合並結果而不讓任務插入？

Answer 1

剛剛從第1點找到了解決緩存問題的方法：

基於以下答案： https : //stackoverflow.com/a/16060619/944637我刪除了緩存，然后“需要”功能可以從文件系統而不是從緩存重新加載文件。

我添加了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));
        }
    });
....