Why pre/postfixes don't work and are shown as text on the webpage using Gulp4?

user_10161976 0
Viewed 59

I'm trying to use libraries 'gulp-file-include' to include partials (header, footer) in my main html file. I'm also trying to use i18n using 'gulp-html-i18n'. Both partials and i18n seem working ("file-include" throws error when I'm trying to put the wrong path of file, or i18n creates lang directories). However when I try to wrap them into needed pre/postfixes, they are shown as plain text on the webpage.

Here is my gulpfile.js : Codeshare

Html: 

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

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

Result:

Result:

gulp javascript
2 Answers

From looking at the https://www.npmjs.com/package/gulp-file-include documentation I can see that there is a difference in the gulpfile.js file you provided and the example in the documentation.

Your code:

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 in the documentation:

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

As you can see, it seems that there are missing parts prefix and basepath which are probably needed.

From looking at the documentation of https://www.npmjs.com/package/gulp-html-i18n it seems that you need to add index.js or index.json or index.yaml under the specific lang folder, like ./lang/en-US/ with the appropriate translations (e.g. "title" in your case)

user_60988120

The problem was with path set in browsersync. I set the src(dev) path instead of build.

user_101619760
Related