Description
前端资源压缩合并maven插件之wro4j
原文写于 2014-05-14
参考文章：前端性能优化-JS/CSS压缩合并
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就是这样的一个东西。只是现在我们对这方面的研究及实践经验过少，后续有精力可以研究下这个东西并引入到项目中。