How to replace JS and CSS references when deploying a static site?

Question

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?

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
– Richard, Commented Mar 31, 2013 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
– elifiner, Commented Mar 31, 2013 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
– Richard, Commented Mar 31, 2013 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
– pwdst, Commented Mar 31, 2013 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
– elifiner, Commented Apr 1, 2013 at 14:54

Ujwal Abhishek · Accepted Answer · 2013-04-02 11:48:26Z

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>

answered Apr 2, 2013 at 11:48

Ujwal Abhishek

4382 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to replace JS and CSS references when deploying a static site?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related