Wie ordnungsgemäß Minify Maven Plugin verwenden, um js und CSS in Angularjs App zu minimieren?

Question

Ich versuche, Javascripts und CSS-Dateien in meiner angularjs App mit zu minimieren. Ich bin in der Lage, alle js & Css zu minimieren und eine Krieg-Datei mit Maven, aber beim Versuch, App URL zu öffnen, bekomme ich Error: [$injector:unpr] Unknown provider: aProvider <- a und meine App funktioniert nicht.

Below Ich meine pom Plugin-Konfiguration

<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> 

Verzeichnisstruktur

Meine Reglerstruktur bietet

'use strict'; 

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

Chrome Konsolen Fehler

Does samaxes minify maven plugin Unterstützung Verkleinerungs AngularJS Apps oder muss ich andere Alternativen zu verwenden?

Bitte helfen Sie mir in meiner angularjs App js und CSS zu minimieren.

Answer 1

Sie sind auf dem richtigen Weg.

Beachten Sie, dass, wenn Sie einen JavaScript-Code eines Controllers minimieren, alle seine Funktionsargumente ebenfalls minimiert werden, und der Dependency Injector wäre nicht in der Lage, Dienste korrekt zu identifizieren.

Es ist möglich, dieses Problem zu lösen, indem Sie die Funktion mit den Namen der Abhängigkeiten annotieren, die als Strings bereitgestellt werden und nicht minimiert werden. Es gibt zwei Möglichkeiten, dies zu tun:

(1.) Erstellen Sie eine $inject Eigenschaft auf der Controller-Funktion, die ein Array von Zeichenfolgen enthält. Beispiel:

(2.) Verwenden Sie eine Inline-Annotation, bei der Sie nicht nur die Funktion bereitstellen, sondern ein Array bereitstellen. In Ihrem Fall wäre es wie folgt aussehen:

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

Für mehr Informationen bitte „Ein Hinweis auf Minifizierung“ dieses tutorial überprüfen.

Answer 2

Auch vorsichtig mit reservierten Wörtern in MVN, wie 'dann' und 'fangen'.

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

könnte wie folgt umgeschrieben werden:

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

Hoffentlich jemand eine bessere Lösung bieten kann, das ist wirklich böse aussieht.

Mehr auf Missing name after . operator YUI Compressor for socket.io js files