Gulp, html templates and fragment loading

Question

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?

Answer 1

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.