Merge multiple html pages in a gulp script


#1

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.

Tnx

Guido


#2

You could use gulp-concat

https://www.npmjs.org/package/gulp-concat


#3

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

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

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


#4

What is it exactly that you are looking to do?

Maybe this?
https://www.npmjs.org/package/gulp-angular-templates


#5

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.