正确使用 grunt 的“bower_concat”和“angular-i18n”的方法答案

【问题标题】：Correct way of using grunt's "bower_concat" and "angular-i18n"正确使用 grunt 的“bower_concat”和“angular-i18n”的方法
【发布时间】：2015-05-05 20:09:44
【问题描述】：

如果没有使用 grunt 的“concat”和“bower_concat”，那么 angular-i18n 就是这样使用的：

 <html ng-app>
    <head>
        ...
       <script src="angular.js"></script>
       <script src="i18n/angular-locale_de-de.js"></script>
        ...
    </head>
 </html>

（根据这里：https://docs.angularjs.org/guide/i18n）

但是...当然：我使用的是concat 和bower_concat。
我是这样使用它们的：

首先我使用 bower_concat 并创建 build/bower-concat.js

注意： bower_concat 读取 bower_components 中每个子目录的每个 bower.json，并将所有主目录连接起来

注意 2：“angular-18n”的 bower.json 有 "ignore": ["**/.*", ...
然后我将所有 js（我的控制器等）连接到 build/inouse-concat.js
最后我将bower-concat.js与inhouse-concat.js连接成all-concat.js
<script src="build/all-concat.js"></script>

所以我认为我可以在第三步中包含相应的语言环境“angular-i18n/angular-locale_de-de.js”，如下所示：

  // inhouse js with bower's js with angular's i18n into one file
  allJsConcat: {
    src: ['build/bower-concat.js', 'bower_components/angular-i18n/angular-locale_de-de.js', 'build/inhouse-concat.js',],
    dest: 'build/all-concat.js',
  }

但这不起作用。我收到：
Uncaught ReferenceError: require is not defined

问题：您如何建议将 grunt、concat 和 bower_concat 与 angular 的 locale js 一起使用？我做错了什么？

【问题讨论】：

标签： angularjs gruntjs group-concat

【解决方案1】：

该死，我讨厌回答自己的问题，因为急于问...

不管怎样，这行得通：

Gruntfile.js

    bower_concat: {
        all: {
            dest: 'build/bower-concat.js',
            cssDest: 'build/bower-concat.css',
            exclude: [
                'angular-i18n'
            ],
            bowerOptions: {
                relative: false
            }
        }
    },

    concat: {
        ...

        allJsConcat: {
            src: ['build/bower-concat.js', 'bower_components/angular-i18n/angular-locale_de-de.js', 'build/inhouse-concat.js',],
            dest: 'build/all-concat.js',
        }
    }

诀窍是使用grunt-bower-concat 的exclude 参数。

还有一个mainFiles 参数我认为也可以解决问题：

主文件

一些 Bower 组件没有列出它们的主文件或（更有可能）根本没有 bower.json 文件。在这种情况下， bower-concat 将尝试猜测主文件，但有时它不能或选择错误的文件。你可以显式定义该组件的主文件。

所以我认为使用它也可以：

 mainFiles: {
     'angular-i18n': 'angular-locale_de-de.js',
 }

不做“三文件连接”（这样更优雅）

【讨论】：