Gulp html templating



>有没有人知道任何"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。它们非常易于使用,并且在前景中不会经常损坏

相关内容

  • 没有找到相关文章

最新更新