如何正確使用minify maven插件來縮小Angularjs應用程序中的js和css？

Question

我正在嘗試使用samaxes minify maven插件在我的angularjs應用程序中縮小javascripts和css文件。 我能夠將所有js和css縮小並使用maven構建war文件，但在嘗試打開app 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縮小maven插件支持縮小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) {
   ...
}]);

有關詳細信息，請查看本教程的 “關於縮小的注意事項”部分。

Answer 2

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

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

可能會改寫為：

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

希望有人可以提供更好的解決方案，這看起來非常討厭。

更多關於失蹤后的名字。 運算符YUI Compressor for socket.io js文件