可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Is there a plugin available for Gulp that does the same thing as Assemble does for Grunt?

I would like to run a task for Gulp that assembles HTML partials, but I cannot find a plugin. Has anyone used one and can you provide a link to it?

UPDATE: 4/21/2016

Lately, I've been using Twig.js with Gulp, along with gulp-data to render JSON in my templates. My article goes into detail. Hint: You could also use Nunjucks, Swig.js, Handlebars etc.

Article: Frontend templating with Gulp and Twig.js

回答1:

Yes, you can do it with this plugin called gulp-file-include

Example :

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

回答2:

I made a plugin to extend html files 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-->

output

<body>

<!-- start content -->
<main>
    my content
</main>
<!-- end content -->

<!-- start footer -->
<footer>
    my footer
</footer>
<!-- end footer -->

</body>

It may help you.

回答3:

I would like to add one more:

I use gulp-preprocess. It is great for building not only html, but also JavaScript, and can even be used in PHP. It has simple directives:

    <!-- @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 -->

I have a directory tree like so:

     ./project root
         - build/
           - less/
             [less,..]
           - html/
               - index/
                 Index-variables.json
                 [Index-partials.html,...]
           Index.html
           [other-build-folders,..]

         - dist
           [htmlfiles,...,CSS folder,...]

For each rendered html file, I have a corresponding file in the build folder and a corresponding folder for that file name. The build file listens for changes in the corresponding folder and preprocesses that data which then outputs to the matching file in the dist folder.

Since preprocess allows you to pass variables as a context object, I pass variables stored in a JSON file in the parent build folder, .e.g. index-variables.json, overwriting any global variables I've defined.

I use it with Livereload,so the upshot is that everytime I make a change in any html partial the page reloads almost instantly with the rendered html - we're talking less than 1 second. In addition to being lightening fast, preprocess seems really stable-I've never had a bug.

This is an awesome way to work.

回答4:

Assemble now supports Gulp: https://github.com/assemble/assemble although at the time of posting the official Assemble website doesn't mention this, and there is very little in the way of documentation.

回答5:

You can do it with a gulp plugin called gulp-handlebars-file-include

This is a very good plugin, because it dose not create or make a custom parser like, gulp-file-include, nor define a new syntax. Instead it use handlebars, therefore, it not only parse with handlebars, but also you can compile your partials files with handlebars and even include your own handlebars helpers.