Quelle est la différence entre scripts/plugins.js et scripts/modules.js?

Question

Yeoman a construit ma première application angulaire, et dans l'index.html, il a placé le code suivant que je devine sera consommé par un processus de construction (je ne sais pas ce que ce processus est encore.)

Mais dans l'index.html, il a divisé les scripts entre ces 3 groupes de commentaires. Le dernier semble être l'endroit où mon code va, mais les deux premiers sont quelque peu arbitraires dans leurs distinctions. J'essaie de comprendre ce qu'ils veulent dire, donc je sais où insérer ces pièces que je dois ajouter à rendre l'application utilisable:

<script src="bower_components/angular-ui-calendar/calendar.js"></script> 
    <script src="bower_components/ng-grid/ng-grid-2.0.7.min.js"></script> 

appartiennent-ils dans le premier groupe (build: scripts js /plugins.js) ou le second (build: js scripts/modules.js)? Et pourquoi jquery et angulaire en dehors de ces deux groupes. On dirait que j'ai besoin d'un peu de contrôle sur ce que ces directives font, mais googling pour build: js ne donne pas de résultats qui semblent pertinents.

<script src="bower_components/jquery/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 

    <!-- build:js scripts/plugins.js --> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> 
    <!-- endbuild --> 

    <!-- build:js scripts/modules.js --> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <!-- endbuild --> 

    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers/main.js"></script> 
    <!-- endbuild --> 

Une explication ou des pointeurs vers les documents pertinents seraient très utiles.

Answer 1

Yeoman construit ma première application angulaire, et dans le index.html, il placé le code suivant que je devine sera consommée par un processus de construction (je ne sais pas ce que ce processus est encore.)

le « processus de construction » est grunt, mais plus particulièrement le plugin grunt-usemin est ce qui sera en utilisant les directives à l'intérieur des blocs de commentaires dans l'index.html.

appartiennent-ils dans le premier groupe (build: scripts js/plugins.js) ou la seconde (build: scripts js/modules.js)?

C'est une décision que vous devez prendre. Gardez à l'esprit que tous les scripts inclus dans chaque bloc seront concaténés et réduits en un seul script inclus dans la version intégrée du fichier index.html. L'instruction "build: js scripts/plugins.js" indique au système de compilation grunt qu'il s'agit d'un bloc javascript et de créer un plugins.js à partir du résultat de la concaténation et de la réduction du contenu du bloc.

Et pourquoi jquery et angular sont-ils en dehors de ces deux groupes?

Vous pouvez regrouper et catégoriser vos scripts comme vous le souhaitez, mais il existe quelques bonnes pratiques. Par exemple, vous pouvez placer tous les scripts que vous possédez dans un bloc, car ils peuvent changer fréquemment. Cela peut améliorer les performances de la mise en cache sur le client car les modifications apportées à vos scripts ne devraient probablement pas entraîner le téléchargement de tous les scripts. Vous ne voudrez probablement pas inclure les scripts jQuery et Angular dans le même bloc que votre code, car cela créerait un très gros script (monolithique) qui devrait être rechargé chaque fois que vous mettez à jour votre code.

J'organise généralement mes groupes soit par catégories, tels que les plugins, bibliothèques ou modules tiers. Parfois, si les performances sont essentielles, je pense à mes groupes en termes de fréquence de mise à jour des scripts de chaque catégorie, de sorte que l'utilisateur n'est pas obligé de télécharger du code qui n'a pas vraiment changé.

est comme si je besoin d'une sorte de poignée sur ce que ces directives font, mais googler construction: js ne qui semblent produire pas être pertinents.

Lisez les documents à la page du plugin grunt-usemin pour tout savoir sur l'utilisation des «directives» que vous voyez.

Answer 2

Je pense que jQuery et Angular sont à l'extérieur car par défaut, grunt cdnify change ces chemins pour utiliser le CDN de Google.