为什么前缀/后缀不工作,并显示为网页上的文本使用Gulp 4?

rbpvctlc  于 2022-12-08  发布在  Gulp
关注(0)|答案(2)|浏览(181)

我尝试使用库“gulp-file-include”来包含部分(header,footer)在我的主html文件中。我也尝试使用'gulp-html-i18 n'来使用i18 n。部分和i18 n看起来都可以工作(当我试图放置错误的文件路径时,“file-include”会抛出错误,或者i18 n会创建lang目录)。然而,当我试图将它们 Package 到所需的前缀/后缀中时,它们在网页上显示为纯文本。
下面是我的gulpfile.js:Codeshare
HTML:

<div>@@include('header.html')</div>

<div>${{index.title}}$</div>
</body>

结果:

7kjnsjlb

7kjnsjlb1#

通过查看https://www.npmjs.com/package/gulp-file-include文档,我可以看到您提供的gulpfile.js文件与文档中的示例有所不同。
您的代码:

function html() {
    return src(path.src.html)
        .pipe(fileinclude())
        .pipe(i18n({
            langDir:'./lang',
            trace:true,
            createLangDirs: true
        }))
        .pipe(dest(path.build.html))
        .pipe(browserSync.stream())
}

文档中的gulpfile.js:

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

正如您所看到的,似乎缺少可能需要的前缀和基路径部分。
通过查看https://www.npmjs.com/package/gulp-html-i18n的文档,您似乎需要在特定的lang文件夹下添加index.js或index.json或index.yaml,如./lang/en-US/,并使用适当的翻译(例如,在您的情况下为“title”)

jmp7cifd

jmp7cifd2#

问题出在browsersync中的路径设置上。我设置的是src(dev)路径而不是build。

相关问题