maven 压缩、合并 js, css

时间:2021-06-08 14:22:53

转载自: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

[html] view
plain
copymaven 压缩、合并 js, cssmaven 压缩、合并 js, css
  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
plain
copymaven 压缩、合并 js, cssmaven 压缩、合并 js, css
  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
plain
copymaven 压缩、合并 js, cssmaven 压缩、合并 js, css
  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 时方便筛选。