Is there a solution out there that will combine and minify js and css files, and then replace the references to them in the original html files? I've found a number of solutions that will minify and combine, but none that will replace the references in the original html file. The Web Minifier Maven plugin from http://mojo.codehaus.org/webminifier-maven-plugin/ does exactly what I want for JS files, but doesn't deal with CSS files. Is there anything that does? Our build process uses Maven, so the solution needs to be either a Maven plugin or a script.
To minify CSS, try CSSNano and csso. To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
Combining CSS and JS files has historically been a popular method of improving a website's performance. By concatenating all of your files into one asset, you minimize the amount of calls that are being made to retrieve these assets from the web server.
To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.
Google Closure Tools provides all of this functionality.
The Closure-compiler supports Maven integration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With