Javascript 使用“Gulp translate html”和“Gulp inject”时的Gulp管道和缓存问题
我有一个项目,我必须生成翻译的静态页面。 之所以选择使用gulp,是因为它有助于缩小资源、监视文件更改和重新编译,还可以在多个页面中插入html模板 我用过: -“gulp inject”:用于将模板插入最终文件 -“gulp translate html”:用于翻译,因为我有“.json”字典 因此,我有两个问题: “一口气翻译html” 这使用json作为翻译输入,使用以下代码:Javascript 使用“Gulp translate html”和“Gulp inject”时的Gulp管道和缓存问题,javascript,json,gulp,gulp-watch,gulp-inject,Javascript,Json,Gulp,Gulp Watch,Gulp Inject,我有一个项目,我必须生成翻译的静态页面。 之所以选择使用gulp,是因为它有助于缩小资源、监视文件更改和重新编译,还可以在多个页面中插入html模板 我用过: -“gulp inject”:用于将模板插入最终文件 -“gulp translate html”:用于翻译,因为我有“.json”字典 因此,我有两个问题: “一口气翻译html” 这使用json作为翻译输入,使用以下代码: gulp.task('translate', function() { return
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”文件上创建了一个watch,当它被修改时,应该重新应用转换。但不知何故,它使用了旧文件而不是修改过的文件。
有解决办法吗?或者其他我可以用于json文件的插件
“大口注射”
在上面的代码示例中,我只翻译了一个文件。但是我需要为几种不同目的地的语言这样做,所以我对这些语言使用了一个循环
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”任务在“translation”任务之前运行,但后者运行得太快。这是因为“injectContent”中没有特定的返回gulp回调,对吗
如何合并结果而不让任务插入 刚刚从第1点找到了缓存问题的解决方案: 基于这个答案:我删除了缓存,然后require函数可以从文件系统而不是缓存中重新加载文件 我添加了delete require.cache[require.resolve./dictionary/en.json'];在“翻译”任务开始时,返回之前 编辑:刚刚在第2点找到了使用合并流合并结果的解决方案,在下面的回答中: 所以我的代码是这样的:
....
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));
}
});
....