javascript - How to properly use minify maven plugin to minify js and css in Angularjs app? - Stack Overflow

admin管理员组

文章数量:1287790

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 <- a and my app does not work.

Below I am providing my pom plugin configuration

<plugin>
    <groupId>.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

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

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

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 <- a and my app does not work.

Below I am providing my pom plugin configuration

<plugin>
    <groupId>.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

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

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

• javascript
• angularjs
• maven
• yui-pressor

Share Improve this question Follow asked Feb 27, 2015 at 12:26 user801116user801116 3

• 1 using maven to build the front end rather then grunt? I like your style, you crazy son of a gun – atmd Commented Feb 27, 2015 at 12:28
• @atmd: I am new to angularjs and do not know much on grunt. We have been using maven to create builds for our server code, and this app also uses java rest end point, which is packaged inside WEB-INF>lib>[jar files]. I went through this article only till Why Should I Use Grunt? section and I only need minification of js and css, so I thought at this point I should not go with grunt just for minifying things. Please correct me if you still think I need to go with grunt. – user801116 Commented Feb 27, 2015 at 12:38
• No you've taken a understandable route. if you are using maven for the back end then there's a good argument for using it on the front end. The argument for grunt generally is to use a build tool written using the language your software is written in (i.e. grunt scripts are written in js) Grunt has plugins which are more focused on front end (pre-pilers, minifyers etc) for example a angular focused minifyer. To my knowledge with maven you have to hook it up to a jar somewhere (like the YUI stuff) – atmd Commented Feb 27, 2015 at 12:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

It's possible to overe 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 $inject property on the controller function which holds an array of strings. For example:

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:

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.

Also be careful with reserved words in mvn, like 'then' and '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

本文标签： javascriptHow to properly use minify maven plugin to minify js and css in Angularjs appStack Overflow