前端资源压缩合并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 / kuitos.github.io

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

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

how to

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

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

写在最后