Use yuicompressor-maven-plugin to compress js and css files

This article introduces the automatic compression of js and css code by using the yuicompressor-maven-plugin plug-in, which is easy to integrate into a continuous integration environment, such as jenkins.

1. Configure yuicompressor-maven-plugin

Add the definition of the plugin to the pom file, the example is as follows:

<plugin>
				<groupId>net.alchim31.maven</groupId>
				<artifactId>yuicompressor-maven-plugin</artifactId>
				<version>1.4.0</version>
				<executions>
					<execution>
						<!-- Before the actual packaging, perform some operations to prepare the packaging and compression operation-->
						<phase>prepare-package</phase>
						<goals>
							<goal>compress</goal>
						</goals>
					</execution>
				</executions>
				<configuration>
					<encoding>UTF-8</encoding>
					<!-- ignore js error warnings-->
					<jswarn>false</jswarn>
					<nosuffix>true</nosuffix>
					<linebreakpos>-1</linebreakpos>
					<!-- All js and css suffixes in the compressed file project will be compressed -->
					<includes>
						<include>assets/**/*.js</include>
						<include>assets/**/*.css</include>
					</includes>
					<!-- files that do not need to be compressed -->
					<excludes>
						<exclude>**/style.css</exclude>
						<exclude>**/*.min.js</exclude>
						<exclude>**/*.min.css</exclude>
						<exclude>**/*-min.js</exclude>
						<exclude>**/*-min.css</exclude>
					</excludes>
					<failOnWarning>false</failOnWarning>
				</configuration>
			</plugin>

1. execution represents the operation to be executed. You can specify which life cycle of maven the operation will run in. Different life cycles will have an impact on the packaging operation. For example, configure the compression to run in the compile phase:

<executions>
        <execution>
        <phase>compile</phase>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>

2. It has been verified that the location where the plug-in is running is the output path of the project compilation and packaging. For example, the project name is abc, and the current folder should be project_root/target/abc. When maven is packaging, it will copy all compiled files and files under webapp to this directory to prepare for packaging.

3. The include node is used to configure the file path that needs to be compressed. Wildcards can be used. * represents a file or path name, ** represents multiple files or path names, and the exclude node is used to configure the file path to exclude compression. Exclude will only exclude The file or path under the path set in include.

My project directory structure is as follows:

2. Configure maven-war-plugin

<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<configuration>
					<warName>${artifactId}</warName>
					<!-- If this configuration is not added, the content below src/main/webapp will be re-copied to the target output directory to overwrite the compiled content, so the compiled content is still uncompressed, add this filter
						The war package will not cover the content -->
					<warSourceExcludes>assets/**/*.js,assets/**/*.css</warSourceExcludes>
				</configuration>
			</plugin>

During the configuration process, it was found that no matter what phase the phase was set to, the final packaged file was always the original file and was not compressed. Later, the test found that maven-war-plugin will automatically copy the files in the webapp directory to the output path, so it can be Exclude files or paths from copying through warSourceExcludes configuration, as specified in the above example to exclude all js files in the js directory and all css files in the css directory.

3. Common mistakes

When compressing js files, if debugger is included in the code, yuicompressor will consider it as a reserved keyword. Commenting or deleting can make the packaging process normally, or you can use eval('debugger') to replace debugger.

[ERROR] ...\src\main\webapp\js\Scroll.js:line 371:column 11:identifier is a reserved word debugger;

[ERROR] ...\src\main\webapp\js\Scroll.js:line 1:column 0:Compilation produced 1 syntax errors.

There are also some non-standard JS writing methods, which will also report Syntax errors, such as:

$(".fa-angle-double-left").removeClass("fa-angle-double-left").addClass(fa-angle-double-left)

The above script does not end with ";", and the style class is not double-quoted, a syntax error will be reported.

4. Relevant information

Plugin main site address: http://alchim.sourceforge.net/yuicompressor-maven-plugin/

Plugin configuration parameters: http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html#resources

配置示例：http://www.myexception.cn/operating-system/427170.html

YUI Compressor官网：http://developer.yahoo.com/yui/compressor/