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

rbpvctlc 于 2022-12-08 发布在 Gulp

关注(0)|答案(2)|浏览(182)

我尝试使用库“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>

结果：

gulp

来源：https://stackoverflow.com/questions/68115988/why-pre-postfixes-dont-work-and-are-shown-as-text-on-the-webpage-using-gulp4

2条答案

按热度按时间

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”）

赞(0）回复(0）举报 2022-12-08

jmp7cifd2#

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

赞(0）回复(0）举报 2022-12-08