Comment utiliser correctement les rapetisser plugin maven pour minify css et js dans Angularjs application?
Je suis en train de rapetisser les javascripts et css fichiers dans mon angularjs application à l'aide de samaxes rapetisser plugin maven. Je suis en mesure d'obtenir tous les js & css minifiés et de construire un fichier war avec maven, mais en essayant d'ouvrir l'app url-je obtenir Error: [$injector:unpr] Unknown provider: aProvider <- a
et mon application ne fonctionne pas.
Ci-dessous, je fournis mon pompon de configuration du plugin
<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>
Structure de répertoire
Mon contrôleur de structure
'use strict';
angular.module('myApp').controller('MyController', function($scope, $filter, $location, $interval, ngTableParams, $modal, $transition, myService, $timeout) {
...
});
Chrome d'erreur de la console
Ne samaxes rapetisser plugin maven soutien minifying angularjs apps ou dois-je besoin d'utiliser d'autres alternatives?
Merci de m'aider dans minifying js et css dans mon application angularjs.
Je suis nouveau sur angularjs et ne savent pas beaucoup sur grognement. Nous avons été à l'aide de maven pour créer des versions pour notre serveur de code, et cette application utilise également java reste un point de fin, qui est emballé à l'intérieur de
WEB-INF>lib>[jar files]
. Je suis allé à travers les cet article seulement jusqu'à Why Should I Use Grunt?
section et j'ai seulement besoin de minification des js et css, j'ai donc pensé à ce point, je ne doit pas aller avec grunt juste pour les minifying des choses. Veuillez me corriger si vous pensez encore que j'ai besoin d'aller avec grunt.Non, vous avez pris une compréhensible route. si vous utilisez maven pour le back-end puis il y a un bon argument pour l'utiliser sur le front-end. L'argument en faveur de grunt est généralement d'utiliser un outil de construction écrites à l'aide de la langue de votre logiciel est écrit (c'est à dire grunt scripts sont écrits en js) Grunt a des plugins qui sont plus axées sur l'extrémité avant (pré-compilateurs, minifyers etc), par exemple, un angulaire porté minifyer. À ma connaissance avec maven, vous devez le raccorder à un pot quelque part (comme le YUI trucs)
OriginalL'auteur | 2015-02-27
Vous devez vous connecter pour publier un commentaire.
Vous êtes sur la bonne voie.
Notez que lorsque vous rapetisser un code JavaScript d'un contrôleur, tous ses arguments d'une fonction serait minimisé, et la dépendance de l'injecteur ne serait pas en mesure d'identifier correctement les services.
Il est possible de surmonter ce problème en annotant la fonction avec les noms des dépendances, à condition que les chaînes, ce qui ne sera pas obtenir minimisé. Il y a deux façons de le faire:
(1.) Créer un
$inject
bien sur la fonction de contrôleur qui est titulaire d'un tableau de chaînes de caractères. Par exemple:(2.) Utiliser une ligne d'annotation où, au lieu de simplement donner la fonction, vous fournir un tableau. Dans votre cas, il devrait ressembler à:
Pour plus d'informations s'il vous plaît vérifier "Une Note sur la Minification" section de cet tutoriel.
angular.min.js
mais je reçoisError: [$injector:unpr] http://errors.angularjs.org/1.2.27/$injector/unpr?p0=aProvider%20%3C-%20a
d'erreur dans la console chromée. Seront la vérification de votre 1ère approche et revenir à nouveau..Juste pour être sûr... Avez-vous effacer le cache du navigateur avant d'essayer 2ème approche? Remarque: vous devez utiliser la même approche lors de la déclaration de directives et de services. Pour plus d'infos, voir: errors.angularjs.org/1.2.27/$injecteur/...
Peut-être que ce répondre va vous aider à trouver la partie du code qui est à l'origine de ce problème.
Merci, il y avait un peu plus de places dans les services & directives, où j'ai besoin de faire quelques changements. Aussi est-il bon d'avoir tous les js & css fichiers fusionnés en 1 js & fichier css? Si oui, pouvez-vous svp m'indiquer.
Aussi, comment puis-je tester et assurez-vous quel est le pourcentage (ou une unité), la performance s'est améliorée?
OriginalL'auteur PrimosK
Aussi être prudent avec les mots réservés dans mvn, comme "alors" et "catch".
Peut être réécrit comme suit:
Espérons que quelqu'un peut fournir une meilleure solution, cela ressemble vraiment méchant.
Plus sur Noms manquants après . opérateur de YUI Compressor pour la socket.io fichiers js
OriginalL'auteur Chris Jager