Compile HTML partials with gulp.js

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>

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.

Tags:

Javascript

Gulp

Recent Posts