In my project, I am keeping all html files in an organized way such that I can understand. For now, I am keeping them in template
folder, something similar to as shown below:
template
--> Dashboard
--> left-content.html
--> right-content.html
--> Analytics
--> graph-section.html
--> profile
--> basic-profile.html
--> advanced-profile.html
I want these files to be compressed and get added as key-values of different js file with name templates.js
What I want is something like this:
templates.js
var templates = {
left-content: "html markup here",
right-content: "html markup here",
graph-section: "html markup here",
basic-profile: "html markup here",
advanced-profile: "html markup here"
}
So, later using any template plugin like lodash
, I can render easily. For example:
var template = _.template(templates['left-content']);
var html = template({data: {/* some data here */}});
document.body.innerHTML = html;
And also, if I add any html files in future, the templates
object in templates.js
should get updated automatically.
Here is the code which I am using in my project. I hope this will be helpful.
Later in command prompt: (after visiting my project's directory)
BTW, I am still not be able to compress the html files. If someone has answer please feel free to edit this post.