maven 压缩、合并 js, css

转载自：http://blog.csdn.net/fangxing80/article/details/17639607

我们知道在 Web 应用开发中为了提高客户端响应速度，需要将页面使用的资源最小化，yuicompressor-maven-plugin 能够很好的实现js, css的压缩、合并处理。

先来看看工程结构：

project

└─main

├─java

└─webapp

├─app

│ │ index.html

│ │

│ ├─css

│ │ style.css

│ │

│ └─js

│ app1.js

│ app2.js

│ jquery-1.9.1.min.js

│

└─WEB-INF

web.xml

index.html 里引用 app1.js 和 app2.js， 首先通过 yuicompressor-maven-plugin 对 app1.js，app2.js 进行压缩、合并。

(http://alchim.sourceforge.net/yuicompressor-maven-plugin/index.html，需翻墙）

pom.xml 配置如下，其中所有已经是 min 化的文件会被排除比如：jquery-1.9.1.min.js

[html] view
plaincopy





<plugin>

<groupId>net.alchim31.maven</groupId>

<artifactId>yuicompressor-maven-plugin</artifactId>

<version>1.3.0</version>

<executions>

<execution>

<goals>

<goal>compress</goal>

</goals>

</execution>

</executions>

<configuration>

<encoding>UTF-8</encoding>

<!-- 忽略 js 错误警告 -->

<jswarn>false</jswarn>

<nosuffix>true</nosuffix>

<linebreakpos>-1</linebreakpos>

<includes>

<include>app/js/*.js</include>

<include>app/js/*.css</include>

</includes>

<excludes>

<exclude>**/**min.js</exclude>

</excludes>

<aggregations>

<aggregation>

<removeIncluded>true</removeIncluded>

<insertNewLine>true</insertNewLine>

<inputDir>${project.build.directory}/${project.build.finalName}</inputDir>

<output>${project.build.directory}/${project.build.finalName}/app/js/app.pack.js</output>

<includes>

<include>app/js/app*.js</include>

</includes>

<excludes>

<exclude>**/**min.js</exclude>

</excludes>

</aggregation>

</aggregations>

</configuration>

</plugin>

这里我将 app1.js 和 app2.js 合并成 app.pack.js， 但光合并还不行。index.html 里仍然是引用 app1.js 和 app2.js，所以必须替换掉。

下一步用 maven-replacer-plugin 来完成替换工作。

为了通用性（你不必写死 js或者css文件名，并且支持多组的文件合并和替换），采用一个特殊的标识在 html 里来圈定要替换的js，这样就可以通过这个标识来寻找替换目标。

index.html

[html] view
plaincopy





<script type="text/javascript" src="app/js/jquery-1.9.1.min.js"></script>

<strong><!-- mergeTo:app.pack.js --></strong>

<script type="text/javascript" src="app/js/app1.js"></script>

<script type="text/javascript" src="app/js/app2.js"></script>

<strong><!-- mergeTo --></strong>

如上所示，所有 <!-- mergeTo:xxx.js --> ... <!-- mergeTo --> 区间的 js 引用会被替换成 xxx.js

增加的 maven-replacer-plugin pom
配置如下：

[html] view
plaincopy





<plugin>

<groupId>com.google.code.maven-replacer-plugin</groupId>

<artifactId>replacer</artifactId>

<version>1.5.2</version>

<executions>

<execution>

<phase>package</phase>

<goals>

<goal>replace</goal>

</goals>

</execution>

</executions>

<configuration>

<file>${project.build.directory}/${project.build.finalName}/app/index.html</file>

<replacements>

<replacement>

<token>

<![CDATA[

<!-- mergeTo:([^\s]*) -->(.*?)<!-- mergeTo -->

]]>

</token>

<value>

<![CDATA[

<script type="text/javascript" src="$1" ></script>

]]>

</value>

</replacement>

</replacements>

<regexFlags>

<regexFlag>CASE_INSENSITIVE</regexFlag>

<regexFlag>DOTALL</regexFlag>

</regexFlags>

</configuration>

</plugin>

maven-replacer-plugin 支持正则替换正好满足我的需求，注意：

(1) 替换 <!-- mergeTo:xxx.js --> 区间的时候，使用的是正则 "单行” 模式，即 DOTALL

(2) 因为 yuicompressor-maven-plugin 执行在 prepackage 所以 maven-replacer-plugin 的 phase 要修改为 package

这样在开发时，增加 js 也不用再重复修改 pom 配置，当然 js 文件命名时最好遵从一定的规则，以便在 compress 时方便筛选。