[英]Gulp pipe and caching issue when using “gulp-translate-html” and “gulp-inject”
我有一个项目,我必须在其中生成翻译后的静态页面。 选择使用gulp是因为它有助于最大程度地减少资源,监视文件更改和重新编译,并且还可以在多个页面中注入html模板。
我用了:
-'gulp-inject':用于将模板插入最终文件
-'gulp-translate-html':用于翻译,因为我有'.json'字典
所以我有两个问题:
它使用以下代码将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文件的其他插件?
'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回调,对吗?
如何合并结果而不让任务插入?
刚刚从第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));
}
});
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.