Question

我使用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

但显然，我不能只改变＆＃34; app.js＆＃34;的路径。当我将index.html中的app.js源更改为：

时

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

它失败了，网站没有正确加载，但我没有从grunt那里得到任何错误。

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

Answer 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

使用Yeoman AngularJS重新组织代码

1 个答案: