Gulp pipe и проблема кэширования при использовании gulp-translate-html и gulp-inject

У меня есть проект, в котором я должен создавать переведенные статические страницы. Выбор состоял в том, чтобы использовать 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?

  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» выполнялась перед задачей «перевод», но последняя запускается слишком рано. Это происходит потому, что в 'injectContent' нет определенного обратного вызова return gulp, верно?

Как я могу объединить результаты и не допустить интеркалирования задач?


javascript json gulp gulp-watch gulp-inject
person Allyanora    schedule 08.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Только что нашел решение проблемы кэширования из пункта 1:

Основываясь на этом ответе: https://stackoverflow.com/a/16060619/944637 я удалил кеш, а затем " функция require» может перезагрузить файл из файловой системы, а не из кеша.

Я добавил delete require.cache[require.resolve('./dictionary/en.json')]; в начале задачи «перевести» перед возвратом.

РЕДАКТИРОВАТЬ: только что нашел решение в пункте 2, чтобы объединить результаты с помощью «потока слияния», в этом ответе здесь: https://stackoverflow.com /а/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));
        }
    });
....
person Allyanora    schedule 08.04.2015