scripts/plugins.js和scripts/modules.js有什么区别？

Question

Yeoman构建了我的第一个角度应用程序,在index.html中,它放置了以下代码,我猜测它将被某些构建过程消耗(我不知道那个过程是什么.)

但是在index.html中,它分解了这3个评论组之间的脚本.最后一个似乎是我的代码所在,但前两个在他们的区别中有点武断.我想弄明白他们的意思,所以我知道在哪里插入这些我需要添加的部分以使应用程序可用:

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

它们属于第一组(build:js scripts/plugins.js)还是第二组(build:js scripts/modules.js)？为什么这些群体之外的jquery和棱角分明.感觉就像我需要处理那些指令所做的那样,但谷歌搜索构建:js不会产生似乎相关的结果.

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

对相关文档的解释或指示将非常有用.

Answer 1

Yeoman构建了我的第一个角度应用程序,在index.html中,它放置了以下代码,我猜测它将被某些构建过程消耗(我不知道那个过程是什么.)

"构建过程"是grunt,但更具体地说,grunt-usemin插件将使用index.html中注释块内的指令.

它们属于第一组(build:js scripts/plugins.js)还是第二组(build:js scripts/modules.js)？

这是你做出的决定.请记住,每个块中包含的所有脚本都将连接并缩小为index.html文件的内置版本中的单个脚本."build:js scripts/plugins.js"指令告诉grunt构建系统这是一个javascript块,并从连接和缩小块内容的结果创建plugins.js.

为什么这些群体之外的jquery和棱角分明？

您可以根据需要对脚本进行分组和分类,但也有一些最佳实践.例如,您可能希望将您拥有的所有脚本放在一个块中,因为它们可能经常更改.这可能有助于提高客户端的缓存性能,因为对脚本的更改可能不会导致重新下载所有脚本.您可能不希望在与代码相同的块中包含jQuery和Angular脚本,因为它会构建一个非常大的(单片)脚本,每次更新代码时都必须重新加载.

我通常按​​类别组织我的组,例如第三方插件,库或模块.有时,如果性能是关键,我可能会考虑我的组在多长时间内期望更新每个类别中的脚本,这样用户就不会被迫下载没有真正改变的代码.

感觉就像我需要处理那些指令所做的那样,但谷歌搜索构建:js不会产生似乎相关的结果.

阅读grunt-usemin插件页面上的文档,了解如何使用您所看到的"指令".