使用gulp.js编译HTML偏分组

是否有可用于Gulp的插件与Assemble for Grunt做同样的事情？使用gulp.js编译HTML偏分组

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

更新：2016年4月21日

最近，我一直在使用Twig.js与咕嘟咕嘟一饮而尽与数据一起呈现在我的模板JSON。我的文章详细介绍。提示：您还可以使用Nunjucks，Swig.js，把手等

文章：Frontend templating with Gulp and Twig.js

来源

2014-02-24 jthomas

是的，你可以用这个插件叫做做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>

来源

2014-02-25 07:32:53

啊。谢谢。这比Assemble的强大得多，但它会工作，直到Assemble允许他们的插件与Gulp一起使用。 – jthomas

我在想同样的事情jthomas，但是我刚刚注意到你在一年多以前发布了这个帖子，并且组装支持gulp依然不存在，所以我不会再持有我的呼吸......回到咕噜声。 – Chad

只是一个更新，我已经使用Swig JS模板引擎与gulp-swig插件。 – jthomas

我做了一个插件来扩展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>

它可以帮助你。

来源

2014-07-28 14:41:42

这看起来也很棒！肯定会试一试。谢谢！ – jthomas

这是为了扩展布局。它可以像http://hammerformac.com/docs/tags/includes一样工作吗？ –

@JitendraVyas是的，它支持@@ include标记。 –

我想补充一点：

我用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文件夹是文件中的相应文件和相应的文件夹名称。 构建文件监听相应文件夹中的更改并预处理该数据，然后将该数据输出到文件夹中的匹配文件。

由于预处理允许你传递变量作为一个上下文对象，我通过存储在父生成文件夹中的JSON文件，.e.g变量。 index-variables.json，覆盖我定义的任何全局变量。

我将它与Livereload一起使用，因此结果是每当我在任何html部分中进行更改时，页面都会以呈现的html几乎立即重新加载 - 我们谈论的时间不到1秒。除了快速减轻外，预处理看起来非常稳定 - 我从来没有遇到过错误。

这是一种非常棒的工作方式。

来源

2014-10-19 16:14:36 user1167442

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

来源

2016-09-24 14:29:24 Dan

这将是非常有益的，首先解释一下什么'Assemble'是为什么这是否值得点击 – vsync

问题问：“Gulp是否有可用的插件，与Assemble for Grunt的功能相同？”。我的回答是，“集结现在与Gulp合作”。我认为没有必要解释Assemble是什么，因为这不是问题。 – Dan

我不读问题，因为标题而来自谷歌。标题是问题不是没有人有时间阅读之后:) – vsync

你可以叫gulp-handlebars-file-include

这是一个很好的插件一饮而尽插件做到这一点，因为它剂量不会创建或自定义的解析器一样，大口喝，文件包括，也不能定义一个新的语法。相反，它使用handlebars，因此，它不仅与车把解析，也可以用车把，甚至编译谐音文件包括你自己车把帮手。

来源

2017-05-03 21:18:22

使用gulp.js编译HTML偏分组

回答

相关问题