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

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

原文写于 2014-05-14 https://github.com/kuitos/kuitos.github.io/issues/5

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

how to

  1. pom配置,加入wro4j插件

    
    <properties>
        <webSourceDirectory>src/main/webappwebSourceDirectory>
        <minimizedResource>trueminimizedResource>
    properties>
    
    <plugins>
            <plugin>
                <groupId>ro.isdc.wro4jgroupId>
                <artifactId>wro4j-maven-pluginartifactId>
                <version>1.7.5version>
                <executions>
                    <execution>
                        <id>wro4jid>
                        <phase>compilephase>
                        <goals>
                            <goal>rungoal>
                        goals>
                    execution>
                executions>
                <configuration>
                    
                    <minimize>${minimizedResource}minimize>
                    
                    <contextFolder>${basedir}/${webSourceDirectory}/contextFolder>
                    <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
                    wroManagerFactory>
                    
                    <wroFile>${basedir}/${webSourceDirectory}/WEB-INF/wro.xmlwroFile>
                    
                    <extraConfigFile>${basedir}/${webSourceDirectory}/WEB-INF/wro.propertiesextraConfigFile>
                    
                    <cssDestinationFolder>${basedir}/${webSourceDirectory}/build/css/cssDestinationFolder>
                    
                    <jsDestinationFolder>${basedir}/${webSourceDirectory}/build/js/jsDestinationFolder>
                    <ignoreMissingResources>falseignoreMissingResources>
                    <failNever>falsefailNever>
                    <failFast>falsefailFast>
                configuration>
            plugin>
        plugins>
  2. 配置wro.xml,用于指定哪些文件需要压缩合并,置于WEB-INF目录下。详细配置:document

    
    <groups xmlns="http://www.isdc.ro/wro">
        
        <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. 手动修改静态资源引用
    之前使用为:

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

    压缩合并之后:

    
    <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");
    }]);

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

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

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

目录说明:

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

写在最后

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

你可能感兴趣的:(blog)