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

问题描述

我想要在生成的html文件的各个位置导入html片段，当我通过一个gulp任务运行它时。

以下是我的大吞吐任务：

  gulp.task（ 'build_html'，function（）{
 gulp.src（'resources / index.html'）
 .pipe（template（{ident：'1'}））
 .pipe（gulp .dest（'frontend'））; 
}）; 
  

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

 < button type =buttonclass =navbar-toggledata-toggle =collapse数据目标= GT导航栏合拢。; 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
  

我希望能够加载类似于

 <％load（dropdown）; ％GT; 
  

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

无论如何，我想应该使用混合功能 http://lodash.com / docs＃mixin
，但考虑到我正在使用gulp，我需要一个文件加载器等。

任何人已经完成了这个操作或者有一个例子可以指向我吗？

解决方案

它看起来已经有一些咕噜插件，它们给我大部分我想要的东西

https：//www.npmjs。 org / package / gulp-file-include /

和

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

因此，我不需要使用下划线mixin来获得我想要的功能。然而，如果任何人想要显示我如何用下划线mixin来做到这一点，我想我会将其标记为答案 - 正在考虑可能可以从组装源。

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

The following is my gulp task:

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

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

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?

解决方案

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/

and

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

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

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屋！