38

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

我想为 Gulp 运行一个组装 HTML 部分的任务，但我找不到插件。有人用过吗，能给个链接吗？

更新：2016 年 4 月 21 日

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

文章：使用 Gulp 和 Twig.js 进行前端模板化

4

5 回答 5

48

是的，你可以使用这个名为gulp-file-include 的插件来做到这一点

例子 ：

# index.html

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

# 视图.html

<h1>view</h1>

# var.html

<label>@@name</label>
<label>@@age</label>
于 2014-02-25T07:32:53.633 回答
12

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

master.html

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

内容.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>

它可能会帮助你。

于 2014-07-28T14:41:42.637 回答
9

我想再补充一个：

我使用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 文件中的变量， .egindex-variables.json覆盖我定义的任何全局变量。

我将它与 Livereload 一起使用，所以结果是每次我对任何 html 部分进行更改时，页面几乎都会立即使用呈现的 html 重新加载——我们所说的时间不到 1 秒。除了快速闪电之外，预处理似乎真的很稳定——我从来没有遇到过错误。

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

于 2014-10-19T16:14:36.670 回答
3

Assemble 现在支持 Gulp：https ://github.com/assemble/assemble虽然在发布官方 Assemble 网站时没有提及这一点，而且文档方式也很少。

于 2016-09-24T14:29:24.157 回答
1

您可以使用名为gulp-handlebars-file-include的 gulp 插件来完成

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

于 2017-05-03T21:18:22.823 回答