Jak poprawnie używać minify maven plugin do min js i css w aplikacji Angularjs?

Question

Próbuję zminimalizować pliki javascripts i css w mojej aplikacji angularjs za pomocą samaxes minify maven plugin. Jestem w stanie uzyskać wszystkie js & css minified i zbudować plik wojenny z maven, ale podczas próby otwarcia adresu URL aplikacji otrzymuję Error: [$injector:unpr] Unknown provider: aProvider <- a, a moja aplikacja nie działa.

Poniżej przytaczam moją konfigurację wtyczek 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> 

Struktura katalogów

Moja struktura regulatora

'use strict'; 

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

błąd konsola Chrome

Czy samaxes minify maven plugin wsparcie Zmniejszanie kodu angularjs aplikacje czy muszę używać innych alternatyw?

Proszę pomóż mi w minimalizowaniu js i css w mojej aplikacji angularjs.

Answer 1

Jesteś na dobrej drodze.

Należy pamiętać, że po minięciu kodu JavaScript kontrolera wszystkie jego argumenty funkcji również zostaną zminimalizowane, a wtryskiwacz zależności nie będzie w stanie poprawnie zidentyfikować usług.

Możliwe jest przezwyciężenie tego problemu poprzez opisanie funkcji nazwami zależności podanymi jako ciągi, które nie zostaną zminimalizowane. Można to zrobić na dwa sposoby:

(1.) Utwórz właściwość $inject na funkcji kontrolera, która przechowuje tablicę łańcuchów. Na przykład:

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

(2.) Użyj adnotacji wstawianej, w której zamiast podawania tej funkcji podajesz tablicę. W twoim przypadku to będzie wyglądać:

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

Aby uzyskać więcej informacji proszę sprawdzić „Uwagi na minifikacji” tego tutorial.

Answer 2

Zachowaj ostrożność, używając słów zastrzeżonych w mvn, takich jak "wtedy" i "złap".

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

może być zapisane jako:

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

Mam nadzieję, że ktoś może zapewnić lepsze rozwiązanie, to wygląda naprawdę paskudny.

Więcej o Missing name after . operator YUI Compressor for socket.io js files