Question

是否有可用于Gulp的插件与Assemble为Grunt做同样的事情？

我想为Gulp运行一个组装HTML部分的任务，但我找不到插件。有没有人使用过它，你可以提供链接吗？

更新时间：2016年4月21日

最近，我一直在使用Gulp的Twig.js，以及gulp-data在我的模板中渲染JSON。我的文章详细介绍。提示：你也可以使用Nunjucks，Swig.js，Handlebars等。

文章：Frontend templating with Gulp and Twig.js

Answer 1

是的，你可以使用名为 gulp-file-include

的插件来实现

示例：

#index.html

<!DOCTYPE html>
<html>
  <body>
  @@include('./view.html')
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345
  })
  </body>
</html>

＃view.html

<h1>view</h1>

＃var.html

<label>@@name</label>
<label>@@age</label>

Answer 2

我制作了一个插件来扩展html文件https://www.npmjs.org/package/gulp-html-extend

master.html

<body>
    <!-- @@placeholder=content -->
    <!-- @@placeholder=footer -->
</body>

content.html

<!-- @@master=master.html-->

<!-- @@block=content-->
<main>
    my content
</main>
<!-- @@close-->

<!-- @@block=footer-->
<footer>
    my footer
</footer>
<!-- @@close-->

输出

<body>

<!-- start content -->
<main>
    my content
</main>
<!-- end content -->

<!-- start footer -->
<footer>
    my footer
</footer>
<!-- end footer -->

</body>

它可能对你有帮助。

Answer 3

我想补充一点：

我使用gulp-preprocess。它不仅可以构建html，还可以构建JavaScript，甚至可以在PHP中使用。它有简单的指令：

    <!-- @include filename.extension -->

    <!-- @ifdef foo -->
        Included html if foo is defined
    <!-- @endif -->

    Also @ifndef (not defined)

    Variables

    <!-- @echo bar -->

   Or even cooler:

    <a href="<-- @echo linkvar -->">link</a>

  Also (as far as I can tell) unlimited sub inclusion:

   <!--  I am an included file -->
   <!-- @include relative/to/me/data.html -->

我有一个像这样的目录树：

     ./project root
         - build/
           - less/
             [less,..]
           - html/
               - index/
                 Index-variables.json
                 [Index-partials.html,...]
           Index.html
           [other-build-folders,..]

         - dist
           [htmlfiles,...,CSS folder,...]

对于每个呈现的html文件，我在build文件夹中有一个相应的文件，并且该文件名的对应文件夹。 构建文件侦听相应文件夹中的更改，并预处理该数据，然后将其输出到 dist 文件夹中的匹配文件。

由于preprocess允许您将变量作为上下文对象传递，因此我将存储在父构建文件夹中的JSON文件中的变量传递给.e.g。 index-variables.json，覆盖我定义的任何全局变量。

我将它与Livereload一起使用，所以结果是每当我在任何html部分进行更改时，页面几乎会立即使用渲染的html重新加载 - 我们说的不到1秒钟。除了快速闪电之外，预处理似乎非常稳定 - 我从未遇到过错误。

这是一种很棒的工作方式。

Answer 4

汇编现在支持Gulp：https://github.com/assemble/assemble虽然在发布官方汇编网站时没有提到这一点，但文档的方式却很少。

Answer 5

您可以使用名为gulp-handlebars-file-include

的gulp插件来完成此操作

这是一个非常好的插件，因为它不会创建或创建自定义解析器，如gulp-file-include，也不会定义新语法。相反，它使用handlebars，因此，它不仅可以解析把手，而且还可以使用把手编译部分文件，甚至可以包含您自己的把手帮手。

使用gulp.js编译HTML部分

5 个答案: