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

kuitos · 2015-08-23T09:35:20Z

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

原文写于 2014-05-14

how to

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>

配置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>

配置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

运行wro4j

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

手动修改静态资源引用
之前使用为：

<!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就是这样的一个东西。只是现在我们对这方面的研究及实践经验过少，后续有精力可以研究下这个东西并引入到项目中。

kuitos added blog Java 工具 and removed blog labels Aug 23, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kuitos commented Aug 23, 2015

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

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

Comments

kuitos commented Aug 23, 2015

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

how to

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

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

写在最后