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

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

提问by

I am trying to minify javascripts and css files in my angularjs app using samaxes minify maven plugin. I am able to get all js & css minified and build a war file with maven, but while trying to open app url I get Error: [$injector:unpr] Unknown provider: aProvider <- aand my app does not work.

我正在尝试使用samaxes minify maven plugin来缩小我的 angularjs 应用程序中的 javascripts 和 css 文件。我能够缩小所有 js 和 css 并使用 maven 构建一个 war 文件，但是在尝试打开应用程序 url 时我得到了Error: [$injector:unpr] Unknown provider: aProvider <- a我的应用程序不起作用。

Below I am providing my pom plugin configuration

下面我提供我的 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>

Directory structure

目录结构

My controller structure

我的控制器结构

'use strict';

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

Chrome console error

Chrome 控制台错误

Does samaxes minify maven pluginsupport minifying angularjs apps or do I need to use any other alternatives?

samaxes minify maven 插件是否支持缩小 angularjs 应用程序，或者我是否需要使用任何其他替代方案？

Please help me in minifying js and css in my angularjs app.

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

采纳答案by PrimosK

You are on the right track.

你在正确的轨道上。

Note that when you minify a JavaScript code of a controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

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

It's possible to overcome this problem by annotating the function with the names of the dependencies, provided as strings, which will not get minified. There are two ways of doing it:

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

(1.) Create a $injectproperty on the controller function which holds an array of strings. For example:

(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.) Use an inline annotation where, instead of just providing the function, you provide an array. In your case it would look like:

(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) {
   ...
}]);

For more info please check out "A Note on Minification" section of this tutorial.

有关更多信息，请查看本教程的“关于缩小的注意事项”部分。

回答by Chris Jager

Also be careful with reserved words in mvn, like 'then' and 'catch'.

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

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

Might be rewritten as:

可以改写为：

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

Hopefully somebody can provide a better solution, this looks really nasty.

希望有人可以提供更好的解决方案，这看起来真的很讨厌。

More on Missing name after . operator YUI Compressor for socket.io js files

更多关于 之后缺少名称。用于 socket.io js 文件的运算符 YUI 压缩器