WEBAPP开发Maven插件wro4j-maven-plugin压缩、合并js、css详解
白羽 2019-07-11 来源 :网络 阅读 3183 评论 0

摘要:本文将带你了解WEBAPP开发Maven插件wro4j-maven-plugin压缩、合并js、css详解,希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发Maven插件wro4j-maven-plugin压缩、合并js、css详解,希望本文对大家学WEBAPP有所帮助。

WEBAPP开发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.  

  6.     <executions>

  7.         <execution>

  8.             <id>optimize-web-resources</id>

  9.             <phase>compile</phase>

  10.             <goals>

  11.                 <goal>run</goal>

  12.             </goals>

  13.         </execution>

  14.     </executions>

  15.  

  16.     <configuration>

  17.         <ignoreMissingResources>false</ignoreMissingResources>

  18.         <jsDestinationFolder>

  19.             ${project.build.directory}/${project.build.finalName}/static/js

  20.         </jsDestinationFolder>

  21.         <cssDestinationFolder>

  22.             ${project.build.directory}/${project.build.finalName}/static/css

  23.         </cssDestinationFolder>

  24.         <wroManagerFactory>

  25.             ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory

  26.         </wroManagerFactory>

  27.     </configuration>

  28. </plugin>



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

 

  1. <?xml version="1.0" encoding="UTF-8"?>

  2. <groups xmlns="//www.isdc.ro/wro" xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"

  3.     xsi:schemaLocation="//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.  

  12.     <group name="custom">

  13.         <css>/static/css/front.css</css>

  14.         <css>/static/css/comment/comment.css</css>

  15.         <css>/static/plugins/syntaxhighlighter/shCore.css</css>

  16.         <js>/static/js/front/coding.js</js>

  17.     </group>

  18.  

  19. </groups>

 

3.    配置wro4j相关属性,新建WEB-INF/wro.properties,例如配置内容为:

  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等合并压缩后的文件。

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

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!


本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 1
看完这篇文章有何感觉?已经有3人表态,67%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程