使用 Yeoman AngularJS 重新组织代码答案

【问题标题】：Reorganize code with Yeoman AngularJS使用 Yeoman AngularJS 重新组织代码
【发布时间】：2014-06-20 22:34:51
【问题描述】：

我使用 Yeoman 来初始化我的 AngularJS 项目（我遵循本指南：http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/），但在阅读了有关最佳实践的更多信息后，我决定重新组织我的代码。

发件人：

app/
    styles/
    views/
        submit.html
        search.html
    scripts/
        app.js
        controllers/
            submit.js
            search.js
    index.hmtl

到这个基于模块的结构：

app/
    styles/
    myApp/
        app.js
        home/
        search/
            search.js
            search.html
        submit/
            submit.js
            submit.html
    index.html

但显然，我不能只更改“app.js”的路径。当我将 index.html 中 app.js 的来源更改为：

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

它失败了，网站无法正常加载，但我没有从 grunt 得到任何错误。

如何在不搞砸的情况下进行重组？我是否必须更改 grunt 文件中的某些内容？

【问题讨论】：

标签： angularjs gruntjs yeoman

【解决方案1】：

您需要使用 glob 语法修改 grunt 文件以在所有子目录中查找 javascript 文件（这在您添加新模块时尤其重要）。 ngbp 项目有一个使用这种格式的更复杂的 Gruntfile.js 的很好的例子。该 Gruntfile 收集项目中的所有脚本，然后在构建 index.html 时将它们包含在一个循环中，如下所示：

<% scripts.forEach(function(file) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

还请记住，当您在更深的目录中添加模块并拆分文件时，脚本包含的顺序很重要。您将不得不使用 minimatch 规则，但我的一个项目的示例构建如下所示：

  build: {
    dir: '<%= build_dir %>',
    src: [
      '<%= vendor_files.js %>',
      '<%= build_dir %>/src/**/*.js',
      '!<%= build_dir %>/src/**/*-*-*.js',
      '!<%= build_dir %>/src/**/*-*.js',
      '<%= build_dir %>/src/**/*-*.js',
      '!<%= build_dir %>/src/**/*-*-*.js',
      '<%= build_dir %>/src/**/*.js',
      '<%= html2js.common.dest %>',
      '<%= html2js.app.dest %>',
      '<%= vendor_files.css %>',
      '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'
    ]
  },

这包含如下结构：

src/
  app/
    search/
      search.js
      search.tpl.html
    submit/
      submit.js
      submit.tpl.html
    something-complex/
      something-complex-directive.js
      soemthing-complex-directive.spec.js  
    app.js
    app.spec.js
  less/
    main.less
  index.html

【讨论】：