Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files.

Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks like:

<link rel="stylesheet" href="styles/app/01.css">
<link rel="stylesheet" href="styles/app/02.css">
<link rel="stylesheet" href="styles/app/03.css">

I would like to replace it with something similar to:

<link rel="stylesheet" href="styles/app/minified.css">

In the JavaScript section, I currently have:

<script src="scripts/01.js"></script>
<script src="scripts/02.js"></script>
<script src="scripts/03.js"></script>

which I want to replace with:

<script src="scripts/minified.js"></script>

Is there a way to accomplish this using Maven or will I need to use another tool?

Answer №1

I have had some promising results using the com.google.code.maven-replacer-plugin. Here is a summary of my progress:

Initially, I encapsulated my styles and scripts with designated "markers":

<!-- replaceCSS -->
<link rel="stylesheet" href="styles/app/01.css">
<link rel="stylesheet" href="styles/app/02.css">
<link rel="stylesheet" href="styles/app/03.css">
<!-- replaceCSSEnd -->
...
...
...
<!-- replaceJS -->
<script src="scripts/01.js"></script>
<script src="scripts/02.js"></script>
<script src="scripts/03.js"></script>
<!-- replaceJSEnd -->

In addition, I included the plugin in my pom file:

<plugin>
                    <groupId>com.google.code.maven-replacer-plugin</groupId>
                    <artifactId>replacer</artifactId>
                    <version>1.5.0</version>
                    <executions>
                        <execution>
                            <phase>package</phase>
                            <goals>
                                <goal>replace</goal>
                            </goals>
                        </execution>
                    </executions>
                    <configuration>
                        <file>target/${project.build.finalName}/app/index.html</file>
                        <replacements>
                            <replacement>
                                <token>(?m)&lt;!-- replaceCSS(.|\s)*?replaceCSSEnd --&</token>
                                <value>&lt;link rel="stylesheet" type="text/css" href="styles/styles.css"/&></value>
                            </replacement>
                            <replacement>
                                <token>(?m)&lt;!-- replaceJS(.|\s)*?replaceJSEnd --&></token>
                                <value>&lt;script src="scripts/scripts.js"/&></value>
                            </replacement>
                        </replacements>
                    </configuration>
                </plugin>

During the build process or when testing with mvn replacer:replace, an exception occurs indicating something like:

 at java.util.regex.Pattern$BranchConn.match(Pattern.java:4568)

Interestingly, this issue only arises when both replacement tags are present. If I remove one for the CSS files, the operation succeeds without any problems.

Furthermore, it seems that the replacement occurs after the packaging of the WAR file, which is clearly incorrect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging date and time in jQuery based on AM/PM notation

I have written some JavaScript code to sort dates in ascending order (from newest to oldest). I have successfully sorted the dates, but I am having trouble sorting the time with AM or PM using a 12-hour format. I can do it in a 24-hour format, but not in ...

"Learn how to use JavaScript and jQuery to alphabetically sort the default td values in a table

This table and script are being used to alphabetically sort the data within the td tags: <button type=button>Sort Options</button> <table class="table-data"> <tr> <td class="filename">C</td> </tr> <t ...

Troubleshooting ER_BAD_FIELD_ERROR in a node mysql stored procedure

Encountering an error message while executing the following code: Error: ER_BAD_FIELD_ERROR: Unknown column 'employee_id' in 'field list' Output: { employee_id: '6', employee_name: 'test', employee_contact: ...

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

Is there a way to handle an error or display N/A when an object is not found in the JSON data I am working with?

Today's games lineup and broadcasting channels can be displayed using this JSON format. However, I am encountering the following error: TypeError: /home/ubuntu/workspace/sportsapp/views/results.ejs:8 6| <% data["games"].forEach(function(game){ ...

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

Perpetual spinning of image grid

Are there any jQuery libraries available for continuous image rotation within an array? I have a collection of 30 partner logos that I would like to rotate continuously using either a jQuery library or plain CSS code. These images and information will be l ...

How can I create off-center underlined text?

I am looking to create a unique text effect where the underline is off-centered and overlaps the text. However, I am unsure of how to achieve this. Can someone guide me on the best way to replicate the following effect? Current Code: ...

Updating the selected value in TomSelect based on an ajax response

I am facing an issue setting a value on TomSelect using ajax response. Normally, I would use the following code on a general dropdown: $('#homebasepeg').val(data.hmb_id).change(); However, when I try to apply this on TomSelect, it doesn't s ...

Locate the closest pals near my present whereabouts

Is it possible to find my friends by obtaining their location from their mobile phones when they are near me? I have a code snippet below with the variable cities where I can input the numbers of my friends. Can I achieve this or do I need to make some m ...

What is the best way to retrieve a JSON element obtained from a Parse.com query?

I'm encountering difficulties when attempting to access a specific JSON element that I receive in response from a query made into a Parse.com Class. Despite reading through various questions and answers on similar topics, I have yet to find a solutio ...

Leveraging deep linking to launch the email application in react native

I am currently exploring the deeplink URL for the mail app on iOS. A scenario I have set up involves displaying an alert that, when the user clicks 'ok', redirects them to the default mail app. const openEmailApp = () => { if (Platform.OS ...

Retrieving the inner content of several paragraph elements, all consolidated into a single string

I'm trying to extract the inner HTML of multiple paragraph elements from a string and I need some help. Here's an example input: let HTML = "<p class="Paragraph" >Hello, World 1!</p><p class="Paragraph" >Hell ...

In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

I'm currently attempting to compare two arrays containing multiple objects and remove elements based on a condition. To my surprise, while testing in Chrome's console, I noticed that the first array (arr1) is not being emptied even though I am us ...

Utilizing custom form fields with JavaScript in Symfony2

Here is my form field template: {% block test_question_widget %} {% spaceless %} <div {{ block('widget_container_attributes') }}> {% set type = type|default('hidden') %} <input type="{{ typ ...

Ways to continuously refresh the display in AngularJS

There are 2 div elements below, and I need to display only one of them depending on whether the doStuff() function is triggered in the controller when a specific anchor element is clicked. <div ng-controller='myController'> <div ng- ...

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

Discover the capability to choose dates from different months using the DatePicker component from @material-ui/pickers

I am currently in the midst of a React project that requires the use of the DatePicker component from @material-ui/pickers. The specific mandate is to show dates outside of the current month and allow users to select those days without needing to switch m ...

Passing asynchronous data from method1 to method2 without impacting the functionality of the script responsible for fetching the asynchronous data in method1

When working with TypeScript, I encountered an issue while trying to invoke an external script called SPCalendarPro within a private method that asynchronously fetches data. The script is invoked in the following manner: private _getSPCalendarPro() { con ...

Removing the Shadow from Material UI's Dialog Box

I am currently struggling with the Material UI dialog component that displays information about a location marker. My issue is with disabling the unattractive box shadow that surrounds the component. Despite setting box-shadow: none and trying different so ...