What is the difference between scripts/plugins.js and scripts/modules.js?

Question

Yeoman built out my first angular app, and in the index.html, it placed the following code that I'm guessing will be consumed by some build process (I don't know what that process is yet.)

But in the index.html, it broke up the scripts between these 3 comment groups. The last one seems to be where my code goes, but the first 2 are somewhat arbitrary in their distinctions. I'm trying to figure out what they mean, so I know where to insert these pieces that I need to add to make the app usable:

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

Do they belong in the first group (build:js scripts/plugins.js) or the second (build:js scripts/modules.js)? And why are jquery and angular outside both of those groups. Feels like I need some kind of handle on what those directives do, but googling for build:js doesn't produce results that seem to be relevant.

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

An explanation or pointers to the relevant docs would be very helpful.

Answer 1

Yeoman built out my first angular app, and in the index.html, it placed the following code that I'm guessing will be consumed by some build process (I don't know what that process is yet.)

The "build process" is grunt, but more specifically the grunt-usemin plugin is what will be using the directives inside the comment blocks in the index.html.

Do they belong in the first group (build:js scripts/plugins.js) or the second (build:js scripts/modules.js)?

That's a decision for you to make. Keep in mind that all the scripts included within each block will get concatenated and minified into a single script include in the built version of the index.html file. The "build:js scripts/plugins.js" instruction is telling the grunt build system that this is a javascript block and to create a plugins.js from the result of concatenating and minifying the contents of the block.

And why are jquery and angular outside both of those groups?

You can group and categorize your scripts however you want, but there are some best practices. For instance, you may want to place all the scripts that are owned by you in one block since they may change frequently. This may help improve caching performance on the client since changes to your scripts should probably not cause all scripts to be re-downloaded. You probably wouldn't want to include jQuery and Angular scripts in the same block as your code because it would build a very large (monolithic) script that would have to be reloaded every time you update your code.

I typically organize my groups either by categories, such as 3rd party plugins, libraries, or modules. Sometimes, if performance is key, I may think about my groups in terms of how frequently I expect the scripts in each category to be updated, that way the user isn't being forced to download code that hasn't really changed.

Feels like I need some kind of handle on what those directives do, but googling for build:js doesn't produce results that seem to be relevant.

Read the docs at the grunt-usemin plugin page to learn all about how to use the "directives" you are seeing.

Answer 2

I think jQuery and Angular are outside because by default, grunt cdnify changes those paths to use Google's CDN.