>有没有人知道任何"gulp"插件将扩展名.html的不同文件编译(捆绑)到一个文件中?或者更接近我想要的实现?
前任。
建 |- 网页 |- 标题.html |- 页脚.html |- 主要部分.html |- 索引.html 区 |- 索引.html(结果)
在索引上.html文件在build
上
...一些元标记 ... 身体标签内的某个地方
/* I want something like */
require('build/html/header.html);
require('build/html/main-section.html);
require('build/html/footer.html);
</pre>
输出将是这些文件内部的 html。每个文件(标头,...)也需要一些东西。
附言有人可以列出带有链接吗?多谢。
你可以使用gulp-inject。来自 github 的自述文件:
为了注入文件内容,您必须提供自定义转换函数,它将以字符串形式返回文件内容。在这种情况下,您还必须省略gulp.src的{read:false}选项。下面的示例显示了如何将 html 部分的内容注入索引.html的头部:
gulp.src('./src/index.html')
.pipe(inject(gulp.src(['./src/partials/head/*.html']), {
starttag: '<!-- inject:head:{{ext}} -->',
transform: function (filePath, file) {
// return file contents as string
return file.contents.toString('utf8')
}
}))
.pipe(gulp.dest('./dest'));
在您的 ./src/index.html:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:head:html -->
<!-- contents of html partials will be injected here -->
<!-- endinject -->
</head>
<body>
</body>
</html>
更好的可能是gulp-inject-multiple-files。
在 gulp 文件中:
gulp.task('inject-files',function(){
// begin injection
gulp.src('foo.html')
.pipe(injectfiles('foo.html','parts'))
.pipe(gulp.dest('temp'));
});
在索引.html文件中:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:head-->
<!-- inject:footer-->
</head>
<body>
</body>
</html>
如果这是针对电子邮件模板的,我也可以推荐 Zurb/Inky。它们非常易于使用,并且在前景中不会经常损坏