javascript - Grunt + Concat + Angularjs

Question

设置：

• AGruntfile有以下任务：

  concat: { build: { files: { 'build/app.js': [ 'src/ .js', 'src/ / .js', '!src/vendors/ ' ], } }

• 许多 Angular 模块，及其控制器、服务等，其结构如下：

  a/ a.js // 模块声明，如：angular.module('a',[]) a-controller.ks // 在其根模块定义中设置控制器，如：angular.module('a').controller ()...

问题：

该任务将它在build文件夹中找到的所有 js 文件连接到一个app.js文件，它做得很好，但是在连接时会弄乱文件的顺序。

例如，它首先连接控制器文件而不是包含模块声明的主文件夹文件，从而触发以下错误：

模块 xxxx 不可用！

我想问题在于concat构建文件的方式，这是由 grunt 核心特别是minimatch库完成的，并且它可能将破折号视为第一个而不是字母，但我不知道如何配置来改变这种行为，甚至知道这是否可能。

问题：

所以，问题是：我怎样才能让 Grunt/Grunt-concat 比同一文件夹中的其他人先处理虚线 f 以便保持顺序？

谢谢

更新1：

挖掘更多之后，似乎它与文件夹内的顺序无关，但 Grunt/Core 将根文件发送到末尾并将它们放在叶子文件的前面。

Answer 1

只需指定要连接文件的顺序，按顺序放置它们，我的意思是，首先添加应该在开始时连接的单个文件，在不需要顺序的完整文件夹之后，最后添加最终文件，大致如下：

grunt.initConfig({
  concat: {
    js: {
      src: ['lib/before.js', 'lib/*', 'lib/after.js'],
      dest: 'bundle.js',
    }
  }
});

Answer 2

您必须为grunt-concat任务指定您希望构建文件的顺序。对于我的项目，我通常保留一个文件夹结构，其中控制器位于app/controllers文件夹中，服务位于文件夹中services，等等，但名称可能会有所不同。我还保留了一个app.js声明我的应用程序模块并为其指定配置处理程序的声明。我使用这样的配置，但几乎没有更改grunt-uglify也可以这样做：concat

uglify: {
    development: {
        files: {
            'public/scripts/app.js': [
                'public/app/app.js',
                'public/app/controllers/*.js',
                'public/app/directives/*.js',
                'public/app/services/*.js'
            ]
        }
    }
}

Answer 3

我只是复制粘贴我的答案，你想要的第二张图片的细节，我希望对你有所帮助。

你可以考虑这个解决方案

1. 将模块声明分离为xxx.module.js

2. 在 grunt-contrib-concat 中修改如下配置：

   把它放在grunt.initConfig之外

var clientApp = './app/';

---

grunt-contrib-concat 配置

dist: {// grab module first, state the second
    src: [
        clientApp+'**/*-controller.js',
        clientApp+'**/*.module.js',
        clientApp+'**/*.state.js',
        clientApp+'**/*.js'
        ],
    dest: 'dist/<%= pkg.name %>.js'
}

我使用状态，所以在尝试导航到任何状态之前我也必须定义状态。这是预览我的代码，模块声明首先声明，然后是我的状态。即使缩小也不会产生任何问题。

我希望这对你有帮助。我遵循这个 johnpapa 的风格指南，如果我的解决方案不起作用，您的问题可能会在那里解决