1

Yeoman 构建了我的第一个 Angular 应用程序，并在 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 和 angular 在这两个组之外。感觉就像我需要对这些指令的作用有所了解，但谷歌搜索build: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 -->

对相关文档的解释或指示将非常有帮助。

4

2 回答 2

5

Yeoman 构建了我的第一个 Angular 应用程序，并在 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 和 angular 在这两个组之外？

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

我通常按​​类别组织我的组，例如 3rd 方插件、库或模块。有时，如果性能是关键，我可能会根据我希望每个类别中的脚本更新的频率来考虑我的小组，这样用户就不会被迫下载没有真正改变的代码。

感觉就像我需要对这些指令的作用有所了解，但谷歌搜索 build:js 并不会产生似乎相关的结果。

阅读grunt-usemin插件页面上的文档，了解如何使用您所看到的“指令”。

于 2013-09-25T04:16:16.373 回答
0

我认为 jQuery 和 Angular 在外部，因为默认情况下，grunt cdnify会更改这些路径以使用 Google 的 CDN。

于 2013-10-18T08:14:34.973 回答