4

I'm building a static site (i.e. HTML files served from a basic web server). During development I'd like to use local (and non-minified) copies of Javascript code and CSS files but when deployed, I'd like to refer to minified versions of the same files.

My current solution is to add data-prod-href and data-prod-src attributes to script and link tags and replace the references as part of my build script. While this keeps the HTML files valid and allows me to develop without running the build script every time, it feels a little bit NIH.

I looked around quite a bit and didn't find any standard practice for this sort of thing. What am I missing?

elifiner
  • 7,347
  • 8
  • 39
  • 48
  • If you use some sort of templating to produce your HTML pages (i would recommend that even for static HTML pages), you can usually write a condition to the template. – Richard Mar 31 '13 at 14:12
  • I'm trying to see if I can avoid using server-side templates completely, or at least use a templating language that's still valid HTML without any preprocessing. – elifiner Mar 31 '13 at 15:56
  • You can use templates that produce static files as output (for example Freemarker can do that). This way your code remains DRY and you still don't need a server-side templating. On the other hand, it is hard to find the templating language that uses valid HTML templates. I was looking myself, but I found only few of them and there were serious drawbacks and limitations there. – Richard Mar 31 '13 at 16:26
  • Relative paths would take care of the local versus remote aspect (e.g. reference your files as "/css/stylesheet.css" or "js/script.js" and you could simply make minification part of your deployment process. Although "script-min.js" or "styles-min.css" is a common convention, there is nothing to say that this has to be used. The paths wouldn't need to change at all. – pwdst Mar 31 '13 at 17:28
  • @pwdst relative paths are a good idea, but they are a bit limited. It would be impossible to point to a CDN in production vs a local copy of Javascript libs in development. – elifiner Apr 01 '13 at 14:54

1 Answers1

0

You can use following script 

<script>
if(location.hostname == "your_site.com"){
$.getScript("your_minified_script.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});   
}
else
{
$.getScript("your_non_minified_script.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
}
</script>
Ujwal Abhishek
  • 328
  • 1
  • 6