Tips for updating JS and CSS links for static site deployment

Question

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these same files.

To achieve this, my current approach involves adding data-prod-href and data-prod-src attributes to script and link tags. This allows me to replace the references during the build process. While this method ensures valid HTML and enables me to develop without constantly running the build script, I can't help but feel that it might be reinventing the wheel.

After searching extensively, I have not come across any established best practices for handling this scenario. Is there something obvious that I am overlooking?

javascript html css client-side static-html

Answer 1

Answer №1

To implement the desired functionality, you can utilize the following script:

<script>
if(location.hostname == "your_website.com"){
$.getScript("your_minimized_code.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Loading complete.');
});   
}
else
{
$.getScript("your_unminified_code.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Loading complete.');
});
}
</script>

Answer 2

To implement the desired functionality, you can utilize the following script:

<script>
if(location.hostname == "your_website.com"){
$.getScript("your_minimized_code.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Loading complete.');
});   
}
else
{
$.getScript("your_unminified_code.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Loading complete.');
});
}
</script>

Tips for updating JS and CSS links for static site deployment

Answer №1

Similar questions

"Choosing a div element using nth-child() method: a step-by-step guide

Javascript loop malfunctioning

The ion-range slider does not function properly when trying to display a central label

Tips on preventing form submission when clicking on another button within the same form

Add items to a fresh record using Mongoose and Express

What could be causing this table to exceed its dimensions by 2 pixels?

Tips for creating a MaterialUI list that wraps to the next line?

Introducing a variety of sub-menu fonts within an elegantly designed jQuery vertical accordion menu

What distinguishes line-height:1.5 from line-height:150% in CSS?

Acquiring the underlying code of websites within the local network

Issue with AJAX request on Internet Explorer versions 8 and 9

Bootstrap 3.2.0 Grid Column Creation Problem Identified

Establish a seamless UDP connection using JavaScript and HTML5

Utilizing prototype JS to create a dynamic floating widget or banner

I am encountering an issue where I am using Getserversideprops within a page to retrieve data from Strapi, but I am consistently

What is the issue with the character set?

Creating a Piechart in Kendo UI that is bound to hierarchal remote data

What is the best way to utilize the features of component A within component B when they exist as separate entities

Utilize the size of the array as a variable

Horizontal JQuery Slider for CategoriesDiscover the smooth, sleek category navigation with