Minify Javascript Css using maven minify plugin
In this tutorial we will show how to minify and compress javascript and css files using maven-minify-plugin. The maven-minify-plugin minifies and compresses javascript and css files at built time which means that you first must build your project in order for the minify files to be created. If you prefer to minify your resources at build time then have a look here, This allows you to debug your javascript code at build time.
First css file: style.css
body {
width: 100%;
}Second css file: custom.css
First JavaScript file: script.js
function welcome(){
this.welcome = "hello, World!";
}Second JavaScript file: custom.js
function custom(){
this.custom = "Custom";
}Include the minified css/javascript in html page
After we build the project using mvn clean package the javascript and css files are combined, minifies and compressed. We can include the minified files in our html page.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="resource/css/combined.min.css" />
<script type="text/javascript" src="resource/js/combined.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Minify css/javascript using the maven-minify-plugin
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.memorynotfound.maven</groupId>
<artifactId>combine-minify-sources</artifactId>
<version>1.0.0-SNAPSHOT</version>
<name>MAVEN - ${project.artifactId}</name>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<build>
<plugins>
<!-- minify and combine js/css -->
<plugin>
<groupId>com.samaxes.maven</groupId>
<artifactId>minify-maven-plugin</artifactId>
<version>1.7.4</version>
<executions>
<execution>
<id>default-minify</id>
<phase>package</phase>
<configuration>
<charset>UTF-8</charset>
<cssSourceDir>resource/css</cssSourceDir>
<cssSourceIncludes>
<cssSourceInclude>**</cssSourceInclude>
</cssSourceIncludes>
<cssFinalFile>combined.css</cssFinalFile>
<jsSourceDir>resource/js</jsSourceDir>
<jsSourceIncludes>
<jsSourceInclude>**</jsSourceInclude>
</jsSourceIncludes>
<jsFinalFile>combined.js</jsFinalFile>
<jsEngine>CLOSURE</jsEngine>
</configuration>
<goals>
<goal>minify</goal>
</goals>
</execution>
</executions>
</plugin>
<!-- exclude non minified resources-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
<configuration>
<webXml>src\main\webapp\WEB-INF\web.xml</webXml>
<warSourceExcludes>**/*.css,**/*.js</warSourceExcludes>
<warSourceIncludes>**/*.min.css,**/*.min.js</warSourceIncludes>
</configuration>
</plugin>
</plugins>
</build>
</project>References
Downloads
Download it ! – combine-minify-javascript-css-example.zip
