前端资源压缩合并maven插件之wro4j

@kuitos 2015-08-23 09:35:20发表于 kuitos/kuitos.github.io Java工具

前端资源压缩合并maven插件之wro4j

原文写于 2014-05-14

参考文章:前端性能优化-JS/CSS压缩合并

how to

  1. pom配置,加入wro4j插件

    <!--自定义属性-->
    <properties>
        <webSourceDirectory>src/main/webapp</webSourceDirectory>
        <minimizedResource>true</minimizedResource>
    </properties>
    
    <plugins>
            <plugin>
                <groupId>ro.isdc.wro4j</groupId>
                <artifactId>wro4j-maven-plugin</artifactId>
                <version>1.7.5</version>
                <executions>
                    <execution>
                        <id>wro4j</id>
                        <phase>compile</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <!-- 是否压缩,minimizedResource -->
                    <minimize>${minimizedResource}</minimize>
                    <!-- web资源目录,webSourceDirectory这个是自定义变量 -->
                    <contextFolder>${basedir}/${webSourceDirectory}/</contextFolder>
                    <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
                    </wroManagerFactory>
                    <!-- wro4j的配置文件,指定需要合并和压缩的文件 -->
                    <wroFile>${basedir}/${webSourceDirectory}/WEB-INF/wro.xml</wroFile>
                    <!-- wro4j的配置文件,指定压缩和合并工具的配置 -->
                    <extraConfigFile>${basedir}/${webSourceDirectory}/WEB-INF/wro.properties</extraConfigFile>
                    <!-- 处理后的css存放目录 -->
                    <cssDestinationFolder>${basedir}/${webSourceDirectory}/build/css/</cssDestinationFolder>
                    <!-- 处理后的js存放目录 -->
                    <jsDestinationFolder>${basedir}/${webSourceDirectory}/build/js/</jsDestinationFolder>
                    <ignoreMissingResources>false</ignoreMissingResources>
                    <failNever>false</failNever>
                    <failFast>false</failFast>
                </configuration>
            </plugin>
        </plugins>
  2. 配置wro.xml,用于指定哪些文件需要压缩合并,置于WEB-INF目录下。详细配置:document

    <?xml version="1.0" encoding="UTF-8"?>
    <groups xmlns="http://www.isdc.ro/wro">
        <!--需要压缩的资源,name为压缩后的文件名-->
        <group name='base.min'>
            <css>/src/css/*</css>
            <js>/src/js/*</js>
        </group>
    </groups>
  3. 配置wro.properties,指定wro相关配置。详细配置:document

    debug=true
    disableCache=true
    ignoreMissingResources=false
    ignoreFailingProcessor=true
    jmxEnabled=true
    preProcessors=
    #指定css、js压缩使用的处理器,详细https://code.google.com/p/wro4j/wiki/AvailableProcessors
    postProcessors=yuiCssMin,googleClosureSimple
  4. 运行wro4j

    执行后会在配置的目录生成相应文件名的合并文件。
    实验环境为IntelliJ,eclipse好像要装插件m2e-wro4j,而且貌似对1.7.x版的wro4j支持有问题,没试过,建议直接使用IntelliJ。

  5. 手动修改静态资源引用
    之前使用为:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="src/css/test1.css" rel="stylesheet">
        <link href="src/css/test2.css" rel="stylesheet">
    </head>
    <body>
    </body>
    <script src="src/js/test1.js"></script>
    <script src="src/js/test2.js"></script>
    </html>

    压缩合并之后:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="build/css/base.min.css" rel="stylesheet">
    </head>
    <body>
    </body>
    <script src="build/js/base.min,js"></script>
    </html>

angularJs项目中需要注意的压缩问题!!

  • 错误(压缩会报错)的写法:
    由于angularJs使用了依赖注入的特性,会将某些指定的service注入到代码中,如:

    function TestCtrl($scope, $http){
        $scope.userName = "test";
        $http.get("xxxxx");
    }

    当TestCtrl被用作controller时,$scope,$http参数会被angularJs框架自动注入具有特殊意义的对象。如果这段代码被压缩,它可能会变成这样:

    function TestCtrl(a, b){
        a.userName = "test";
        b.get("xxxxx");
    }
  • 正确的写法:
    由于angularJs是根据名称进行注入的,这个时候框架就不知道a其实就是之前的$scope了,controller正确的写法应该是这样的

    angular,module("test", []).controller("TestCtrl", ["$scope","$http", function($scope, $http){
        $scope.userName = "test";
        $http.get("xxxxx");
    }]);

    压缩后可能会变成

    angular,module("test", []).controller("TestCtrl", ["$scope","$http", function(a, b){
        a.userName = "test";
        b.get("xxxxx");
    }]);

    这样框架就知道应该将 $scope注入给参数a,$http注入给参数b !
    其实这个特性在angular官方入门教程的第一章就有提到,只是很多人出于偷懒的原因而采用第一种写法。其他的诸如service、directive、filter的写法均应参照后面一种,偷懒只会让你在后面出问题时更痛苦!!

ps:最佳编程实践之web目录结构

好的目录结构可大大降低web项目维护成本,在综合了多个开源js类库及框架之后,总结出如下目录结构

目录说明:

目录 说明
build 前端编译代码目录,供生产环境使用
lib 第三方类库及框架
src 前端源代码目录,供开发环境使用
test js单元测试目录,目录结构请与src中相应js保持一致

写在最后

其实web项目的构建也有很多自动化工具,它们能完成一系列包括压缩合并等web项目管理需求,就好比java世界的maven。Yeoman就是这样的一个东西。只是现在我们对这方面的研究及实践经验过少,后续有精力可以研究下这个东西并引入到项目中。