1. 程式人生 > >Maven使用yuicompressor-maven-plugin打包壓縮css、js檔案

Maven使用yuicompressor-maven-plugin打包壓縮css、js檔案

最近專案想使用在maven打包的時間壓縮js,css檔案,採用yuicompressor-maven-plugin外掛進行壓縮,但只是壓縮減小大小,提高請求速度,並沒有對js進行混淆。下面就寫一下這個外掛的使用。

假設專案包含如下結構


需要把專案中設計的css和js全部壓縮,但是需要配出已經壓縮過的css,js檔案,不然會報錯。

	<build>
		<finalName>shop</finalName>
		<plugins>
			<plugin>
				<groupId>net.alchim31.maven</groupId>
				<artifactId>yuicompressor-maven-plugin</artifactId>
				<version>1.5.1</version>
				<executions>
					<execution>
						<phase>prepare-package</phase>
						<goals>
							<goal>compress</goal>
						</goals>
					</execution>
				</executions>
				<configuration>
					<encoding>UTF-8</encoding>
					<jswarn>false</jswarn>
					<nosuffix>true</nosuffix>
					<linebreakpos>-1</linebreakpos>
					<sourceDirectory>src/main/webapp</sourceDirectory>
					<includes>
						<include>js/*.js</include>
						<include>wapjs/*.js</include>
						<include>activity/**/*.js</include>
						<include>admin/adminjs/*.js</include>
						<include>css/*.css</include>
						<include>activity/**/*.css</include>
					</includes>
					<excludes>
						<exclude>**/*min.js</exclude>
						<exclude>**/jweixin-1.0.0.js</exclude>
						<exclude>**/*min.css</exclude>
					</excludes>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-surefire-plugin</artifactId>
				<version>2.4.2</version>
				<configuration>
					<skipTests>true</skipTests>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-javadoc-plugin</artifactId>
				<version>2.9.1</version>
				<configuration>
					<javadocDirectory>target/javadoc</javadocDirectory>
					<reportOutputDirectory>target/javadoc</reportOutputDirectory>
					<charset>UTF-8</charset>
					<encoding>UTF-8</encoding>
					<docencoding>UTF-8</docencoding>
					<show>private</show>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.6</version>
				<configuration>
					<warSourceExcludes> %regex[^.+(?:(?<!(?:-|\.)min)\.js)], %regex[^.+(?:(?<!(?:-|\.)min)\.css)]</warSourceExcludes>
					<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
				</configuration>
			</plugin>
		</plugins>
		<resources>
			<resource>
				<directory>src/main/resources</directory>
				<includes>
					<include>**/*.properties</include>
					<include>**/*.xml</include>
				</includes>
				<filtering>true</filtering>
			</resource>
			<resource>
				<directory>src/main/java</directory>
				<includes>
					<include>**/*.xml</include>
				</includes>
				<filtering>true</filtering>
			</resource>
		</resources>
	</build>
</project>

打包遇到的問題以及說明:

 1、include標籤中配置的是需要壓縮的檔案,exclude配置的是在include檔案中排除需要壓縮的檔案。

 2、include和exclude中可以使用萬用字元,*表示一個檔案或路徑名,**表示多個檔案或路徑。

 3、jswarn代表是否忽略警告, nosuffix是否新增min字尾, linebreakpos是否壓縮在一行。

 4、net.alchim31.maven需要在org.apache.maven.plugins外掛之前,否則不能夠將壓縮的檔案打到war包裡。

 5、org.apache.maven.plugins配置說明:

                       <plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.6</version>
				<configuration>
					<warSourceIncludes>**</warSourceIncludes>
					<warSourceExcludes> %regex[^.+(?:(?<!(?:-|\.)min)\.js)], %regex[^.+(?:(?<!(?:-|\.)min)\.css)]</warSourceExcludes>
					<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
				</configuration>
			</plugin>
其中

      1、warSourceIncludes不填寫預設是對應 src/main/webapp下的全部檔案。

      2、warSourceExcludes裝配warSourceIncludes中排除不以.min.js -min.js結尾的js檔案。 warSourceIncludes不填寫預設是對應 src/main/webapp下的全部檔案,因為在 yuicompressor配置了不會處理min這些檔案所以這些檔案要拷貝到對應的目錄。由於maven-war-plugin會把yuicompressor配置<include>的檔案壓縮覆蓋輸出到target資料夾裡,但是<exclude>排除掉的檔案並未放到target裡,所以會導致打war包的時間未將<exclude>排除的檔案為打入包中,所以此處需要warSourceExcludes將yuicompressor沒有壓縮的js檔案就會拷貝過去,而壓縮過的js則不會拷貝yuicompressor會拷貝壓縮後的檔案過去。

以下是maven打包壓縮輸出結果:


上面配置經過實際環境,分享一下。