转载自: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,需FQ)
pom.xml 配置如下,其中所有已经是 min 化的文件会被排除比如:jquery-1.9.1.min.js
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
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
配置如下:
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 时方便筛选。