Gulp、html 模板和片段加载 [英] Gulp, html templates and fragment loading

问题描述

当我通过 gulp 任务运行生成的 html 文件时，我想在不同位置导入 html 片段.

I want to import html fragments at various places in a generated html file when I run it through a gulp task.

以下是我的 gulp 任务:

The following is my gulp task:

gulp.task('build_html', function () {
    gulp.src('resources/index.html')
        .pipe(template({ident: '1'}))
        .pipe(gulp.dest('frontend'));
});

在 index.html 文件中有很多我想从片段中加载的 html，例如引导下拉菜单

Inside the index.html file is a lot of html I would like to load from fragments, for example a bootstrap dropdown menu

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

我希望能够通过类似的东西来加载

which I would like to be able to load by having something like

<% load("dropdown"); %>

然后它会在相对路径中查找下拉文件...

And then it looks for the dropdown file in a relative path...

无论如何，我认为应该使用 mixin 功能 http://lodash.com/docs#mixin但鉴于我正在使用 gulp，我需要一个文件加载器等.

Anyway I suppose it should be done using the mixin functionality http://lodash.com/docs#mixin but given that I am using gulp I need a file loader etc.

有人已经这样做了，或者有一个可以指点我的例子吗?

Anyone already done this or have an example they can point me to?

推荐答案

看起来已经有一些 gulp 插件可以满足我的大部分需求

It looks like there are some gulp plugins already that give me most of what I want

https://www.npmjs.org/package/gulp-file-include/

和

https://www.npmjs.org/package/gulp-file-includer/

所以我不需要制作下划线混合来获得我想要的功能.

So I won't need to make an underscore mixin to get the functionality I want.

但是，如果有人确实想展示我如何使用下划线 mixin 来做到这一点，我想我会将其标记为答案 - 我想可能可以从汇编源代码中找出答案.

However if anyone does want to show how I can do it with an underscore mixin I guess I would mark that as the answer - was thinking probably could figure it out from the assemble source.

这篇关于Gulp、html 模板和片段加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！