maven 压缩、合并 js, css – xiong

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

1. <plugin>  
2.     <groupId>net.alchim31.maven</groupId>  
3.     <artifactId>yuicompressor-maven-plugin</artifactId>  
4.     <version>1.3.0</version>  
5.     <executions>  
6.         <execution>  
7.             <goals>  
8.                 <goal>compress</goal>  
9.             </goals>  
10.         </execution>  
11.     </executions>  
12.     <configuration>  
13.         <encoding>UTF-8</encoding>  
14.         <!– 忽略 js 错误警告 –>  
15.         <jswarn>false</jswarn>  
16.         <nosuffix>true</nosuffix>  
17.         <linebreakpos>-1</linebreakpos>  
18.         <includes>  
19.             <include>app/js/*.js</include>  
20.             <include>app/js/*.css</include>  
21.         </includes>  
22.         <excludes>  
23.             <exclude>**/**min.js</exclude>  
24.         </excludes>  
25.         <aggregations>  
26.             <aggregation>  
27.                 <removeIncluded>true</removeIncluded>  
28.                 <insertNewLine>true</insertNewLine>  
29.                 <inputDir>${project.build.directory}/${project.build.finalName}</inputDir>  
30.                 <output>${project.build.directory}/${project.build.finalName}/app/js/app.pack.js</output>  
31.                 <includes>  
32.                     <include>app/js/app*.js</include>  
33.                 </includes>  
34.                 <excludes>  
35.                     <exclude>**/**min.js</exclude>  
36.                 </excludes>  
37.             </aggregation>  
38.         </aggregations>                     
39.     </configuration>  
40. </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

1. <script type=“text/javascript” src=“app/js/jquery-1.9.1.min.js”></script>  
2. <strong><!– mergeTo:app.pack.js –></strong>  
3. <script type=“text/javascript” src=“app/js/app1.js”></script>  
4. <script type=“text/javascript” src=“app/js/app2.js”></script>  
5. <strong><!– mergeTo –></strong>  

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

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

[html] view plaincopy

1. <plugin>  
2.     <groupId>com.google.code.maven-replacer-plugin</groupId>  
3.     <artifactId>replacer</artifactId>  
4.     <version>1.5.2</version>  
5.     <executions>  
6.         <execution>  
7.             <phase>package</phase>  
8.             <goals>  
9.                 <goal>replace</goal>  
10.             </goals>  
11.         </execution>  
12.     </executions>  
13.     <configuration>  
14.         <file>${project.build.directory}/${project.build.finalName}/app/index.html</file>  
15.         <replacements>  
16.             <replacement>  
17.                 <token>  
18.                     <![CDATA[ 
19.                     <!– mergeTo:([^\s]*) –>(.*?)<!– mergeTo –> 
20.                     ]]>  
21.                 </token>  
22.                 <value>  
23.                     <![CDATA[ 
24.                     <script type=”text/javascript” src=”$1″ ></script> 
25.                     ]]>  
26.                 </value>  
27.             </replacement>  
28.         </replacements>        
29.         <regexFlags>  
30.             <regexFlag>CASE_INSENSITIVE</regexFlag>  
31.             <regexFlag>DOTALL</regexFlag>  
32.         </regexFlags>  
33.     </configuration>  
34. </plugin>  

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


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


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

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