Merge multiple html pages in a gulp script


Just starting out with Ionic and looking for a way to merge multiple html files into one. Angular ng-includes or templateUrls are no good as I need to reduce server roundtrips. I am on a web server so I could use the web server to do my concatenation of html files (using server side templates) however I really wanted to separate my web app from my mobile app.

So I was wondering what people are using to do this with gulp? I could always add something like express.js or another server/view engine but this seems so over the top as angular handles all the complex view stuff so adding another view engine strikes me as ugly. What I would love to see is a simple style html file concatenation which I guess is pretty ugly also.

Anyways, any input/feeback is appreciated but please consider that this app will be delivered as a web app also not just as a cordoba wrapped app.




You could use gulp-concat


That looks a bit too simplistic. I need something with a little bit of structure, for instance:

  <div class='content'>
    <include "view1.html"/>
    <include "view2.html"/>
    <include "view3.html"/>

Perhaps I can use something like gulp-concat if I split my ‘layout’/‘master page’ into top half and bottom half, may work.


What is it exactly that you are looking to do?

Maybe this?


That looks like what I’m after. Let me explain in a bit more detail: I need to break up my html into many files (creating an app with 200+ screens). I would like a file for each screen, perhaps a file for some of the more comlpex components also. I cannot use client side ng-include / templateUrls as this would result in way to many server requests (when delivered as a web app on mobile, not phonegap). So I need a compile time solution to merge those files and hence only deliver one html file to the device.

Much appreciated.