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

Question

我正在尝试使用 samaxes minify maven plugin 缩小我的 angularjs 应用程序中的 javascript 和 css 文件。我能够将所有 js 和 css 缩小并使用 Maven 构建一个 war 文件，但是在尝试打开应用程序 url 时我得到 Error: [$injector:unpr] Unknown provider: 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。

Answer 1

你走在正确的轨道上。

请注意，当您缩小控制器的 JavaScript 代码时，它的所有函数参数也会被缩小，依赖注入器将无法正确识别服务。

可以通过使用依赖项名称注释函数来解决此问题，以字符串形式提供，不会缩小。有两种方法：

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

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

(2.) 使用内联注释，而不是仅仅提供函数，而是提供一个数组。在您的情况下，它看起来像：

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

有关详细信息，请查看此 tutorial 的 "A Note on Minification" 部分。

Answer 2

还要注意 mvn 中的保留字，例如 'then' 和 'catch'。

$http.get('some.json').then(convertResponse).catch(throwError);

可能改写为：

$http.get('some.json')['then'](convertResponse)['catch'](throwError);

希望有人能提供更好的解决方案，这看起来真的很糟糕。

更多关于Missing name after . operator YUI Compressor for socket.io js files

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

How to properly use minify maven plugin to minify js and css in Angularjs app?

javascript

angularjs

maven

yui-compressor