2015年06月07日 Maven plugins 浏览(1188) 收藏

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

合并、压缩js、css,并使用动静分离,且静态资源单独部署使用CDN加速是目前很多互联网网站提高网页访问速度的有效手段。本文主要介绍,Maven项目如何使用wro4j-maven-plugin插件生成合并、压缩后的静态资源文件。

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


<plugin>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-maven-plugin</artifactId>
    <version>${wro4j.version}</version>

    <executions>
        <execution>
            <id>optimize-web-resources</id>
            <phase>compile</phase>
            <goals>
                <goal>run</goal>
            </goals>
        </execution>
    </executions>

    <configuration>
        <ignoreMissingResources>false</ignoreMissingResources>
        <jsDestinationFolder>
            ${project.build.directory}/${project.build.finalName}/static/js
        </jsDestinationFolder>
        <cssDestinationFolder>
            ${project.build.directory}/${project.build.finalName}/static/css
        </cssDestinationFolder>
        <wroManagerFactory>
            ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
        </wroManagerFactory>
    </configuration>
</plugin>


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


<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">
    <group name="basic">
        <css>/static/css/front.css</css>
        <js>/static/js/jquery.js</js>
        <js>/static/js/jquery.paging.min.js</js>
        <js>/static/js/front/global.js</js>
        <js>/static/js/front/search.js</js>
    </group>

    <group name="custom">
        <css>/static/css/front.css</css>
        <css>/static/css/comment/comment.css</css>
        <css>/static/plugins/syntaxhighlighter/shCore.css</css>
        <js>/static/js/front/coding.js</js>
    </group>

</groups>

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

cacheUpdatePeriod=0
modelUpdatePeriod=0
debug=true
disableCache=false
gzipResources=true
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等合并压缩后的文件。

赞一下 1 人赞了本文