Maven插件wro4j-maven-plugin压缩、合并js、css详解

1.    在pom.xml文件中,引入wro4j-maven-plugin插件

  1. <plugin>
  2. <groupId>ro.isdc.wro4j</groupId>
  3. <artifactId>wro4j-maven-plugin</artifactId>
  4. <version>${wro4j.version}</version>
  5. <executions>
  6. <execution>
  7. <id>optimize-web-resources</id>
  8. <phase>compile</phase>
  9. <goals>
  10. <goal>run</goal>
  11. </goals>
  12. </execution>
  13. </executions>
  14. <configuration>
  15. <ignoreMissingResources>false</ignoreMissingResources>
  16. <jsDestinationFolder>
  17. ${project.build.directory}/${project.build.finalName}/static/js
  18. </jsDestinationFolder>
  19. <cssDestinationFolder>
  20. ${project.build.directory}/${project.build.finalName}/static/css
  21. </cssDestinationFolder>
  22. <wroManagerFactory>
  23. ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
  24. </wroManagerFactory>
  25. </configuration>
  26. </plugin>

2.    配置合并、压缩策略,新建文件/WEB-INF/wro.xml,例如配置内容为:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">
  4. <group name="basic">
  5. <css>/static/css/front.css</css>
  6. <js>/static/js/jquery.js</js>
  7. <js>/static/js/jquery.paging.min.js</js>
  8. <js>/static/js/front/global.js</js>
  9. <js>/static/js/front/search.js</js>
  10. </group>
  11. <group name="custom">
  12. <css>/static/css/front.css</css>
  13. <css>/static/css/comment/comment.css</css>
  14. <css>/static/plugins/syntaxhighlighter/shCore.css</css>
  15. <js>/static/js/front/coding.js</js>
  16. </group>
  17. </groups>

3.    配置wro4j相关属性,新建WEB-INF/wro.properties,例如配置内容为:
配置属性含义参见:http://everycoding.com/coding/68.html

  1. cacheUpdatePeriod=0
  2. modelUpdatePeriod=0
  3. debug=true
  4. disableCache=false
  5. gzipResources=true
  6. ignoreMissingResources=false

此插件必须配置wro.properties。否则在执行打包命令:clean package时否则会报如下异常:
src\main\webapp\WEB-INF\wro.properties (系统找不到指定的文件。) -> [Help 1]

4.    执行maven命令:clean package 打包
我们会发现根据wro.xml配置的策略在
${project.build.directory}/${project.build.finalName}/static/js
${project.build.directory}/${project.build.finalName}/static/css的目录下生成了
basic.css、basic.js、custom.css、custom.js等合并压缩后的文件。

上一篇:B1003. 我要通过!


下一篇:JS Module