javascript – 如何正确使用minify maven插件来缩小Angularjs应用程序中的js和css?

前端之家收集整理的这篇文章主要介绍了javascript – 如何正确使用minify maven插件来缩小Angularjs应用程序中的js和css?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用 samaxes minify maven plugin在我的angularjs应用程序中缩小javascripts和css文件.我能够获得所有js& css缩小并使用maven构建war文件,但在尝试打开app url时我得到错误:[$injector:unpr]未知提供者:aProvider< - a我的应用程序不起作用. 下面我提供我的pom插件配置
<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.4</version>
    <executions>
        <execution>
            <id>min-js</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>minify</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <charset>UTF-8</charset>
        <skipMerge>true</skipMerge>
        <cssSourceDir>myapp/styles</cssSourceDir>
        <jsSourceDir>myapp/javascript</jsSourceDir>
        <jsEngine>CLOSURE</jsEngine>
        <closureLanguage>ECMASCRIPT5</closureLanguage>
        <closureAngularPass>true</closureAngularPass>
        <nosuffix>true</nosuffix>
        <webappTargetDir>${project.build.directory}/minify</webappTargetDir>
        <cssSourceIncludes>
            <cssSourceInclude>**/*.css</cssSourceInclude>
        </cssSourceIncludes>
        <cssSourceExcludes>
            <cssSourceExclude>**/*.min.css</cssSourceExclude>
        </cssSourceExcludes>
        <jsSourceIncludes>
            <jsSourceInclude>**/*.js</jsSourceInclude>
        </jsSourceIncludes>
        <jsSourceExcludes>
            <jsSourceExclude>**/*.min.js</jsSourceExclude>
        </jsSourceExcludes>
    </configuration>

</plugin>

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.4</version>
    <configuration>
        <webResources>
            <resource>
                <directory>${project.build.directory}/minify</directory>
            </resource>
        </webResources>
    </configuration>
</plugin>

目录结构

我的控制器结构

'use strict';

angular.module('myApp').controller('MyController',function($scope,$filter,$location,$interval,ngTableParams,$modal,$transition,myService,$timeout) {
   ...
});

Chrome控制台错误

samaxes minify maven plugin是否支持缩小angularjs应用程序或我是否需要使用任何其他替代方案?

请帮助我在我的angularjs应用程序中缩小js和css.

解决方法

你走在正确的轨道上.

请注意,当您缩小控制器的JavaScript代码时,其所有函数参数也将缩小,并且依赖项注入器将无法正确识别服务.

可以通过使用依赖项的名称来注释函数来克服这个问题,这些依赖项的名称是以字符串形式提供的,这些字符串不会被缩小.有两种方法

(1.)在控制器函数上创建一个$inject属性,该函数包含一个字符串数组.例如:

function MyController($scope,$timeout) {...}
MyController.$inject = ['$scope','$filter','$location','$interval','ngTableParams','$modal','$transition','myService','$timeout'];

(2.)使用内联注释,而不是仅提供函数,而是提供数组.在你的情况下,它看起来像:

angular.module('myApp').controller('MyController',['$scope','$timeout',$timeout) {
   ...
}]);

有关详细信息,请查看此tutorial的“关于缩小的注意事项”部分.

猜你在找的JavaScript相关文章