Question

我正在一个必须为每个国家/地区生成页面的网站上工作（这些网页之间的唯一区别是元标记，title和img标记。手动执行此操作对我来说效率不高，因为每次我必须在模板中更改某些内容时，我必须对每个国家/地区的每个.html文件执行相同的操作。

我听说我可以使用gulp.js，但我不确定我是否可以或如何。

基本上，我要生成12个这样的.html个文档：

<head>
  <title>-country title-</title>
  <meta name="description" content="-country description-">
</head>
<body>
  <img src="-country-img-" />
</body>

有关此问题的任何建议，或其他可能的解决方案？

Answer 1

最后我使用this article使用 gulp.js + handlebars.js 来解决问题。

如果你想知道我是怎么做的，这是我的gulpfile.js：

gulp.task('pages', function() {
for(var i=0; i<countries.length; i++) {
    var country = countries[i],
        fileName = country.filename.replace(/ +/g, '-').toLowerCase();

        console.log(country.filename);

    gulp.src('countries-template.handlebars')
        .pipe(handlebars(country))
        .pipe(rename(fileName + ".html"))
        .pipe(gulp.dest('build/countries'));
}
gulp.src('countries-template.handlebars')
    .pipe(handlebars(countries[0]))
    .pipe(rename("index.ejs"))
    .pipe(gulp.dest(''));
})

如果您想查看countries-config.json文件，这是我的.json：

[{
"name": "Argentina",
"filename": "argentina",
"slug": "arg"
},{
"name": "Mexico",
"filename": "mexico",
"slug": "mex"
},{
"name": "Chile",
"filename": "chile",
"slug": "chi"
},{
"name": "Bolivia",
"filename": "bolivia",
"slug": "bol"
}, [etc...]
]

我不会展示我的countries-template.handlebars，因为它非常庞大，但我可以保证这种方法能够完美地为我服务

感谢各位的帮助！

从变量生成多个HTML文件

1 个答案: