Menu
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
342
Breaking HTML into smaller files Since they are repeated, we can pull them out and place them into smaller files called partials. Note: The syntax for including partials is different for each template engine.
The tag {% include %} is how a partial is added to a page. By default, Eleventy looks for partials in the _includes folder. For example, to include header HTML that is in the file _includes/_head. html, the tag would be {% include _head.
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
