使用grunt将所有供应商JavaScript文件连接起来？

Question

我正在使用 Yeoman（v1.x）和 grunt（v0.4.2）构建一个 Angular 项目。 build 任务将所有的 app/script JS 文件连接起来，但是它不会将所有依赖文件连接起来，因此我的生成的 index.html 文件会发出这些调用：

<script src="components/angular-unstable/angular.js"></script>
<script src="components/jquery/jquery.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="components/moment/moment.js"></script>
<script src="components/underscore/underscore.js"></script>

<!-- xxxxxbuild:js scripts/scripts.js -->
<script src="scripts/274baf7d.scripts.js"></script>

我希望我的项目使用的所有组件，例如 angular.js、jquery.js 等等都在 scripts.js 中。重新配置 GruntFile 做到这一点容易吗？或者出于实际原因，默认情况下不这样做？

- Zando

---

是的，我有同样的问题，为什么这个被留作默认设置？如果使用常见的CDN，会发生什么情况，这意味着它们不应该被连接起来吗？还有像modernizr这样的东西呢？它们也不能被连接起来，因为它需要在页面顶部。 - CMCDragonkai

Answer 1

没问题，这很容易配置。只需在你通过grunt的concat任务传递的源中添加供应商脚本即可。

// Project configuration.
grunt.initConfig({
  concat: {
    dist: {
      src: ['vendors/**/*.js', 'scripts/**/*.js'],
      dest: 'built.js'
    }
  }
});

- Simon Boudrias

---

我很好奇：我知道Browserify基于require语句进行串联。这是否与Grunt的功能重叠，还是有不同的用例？ - Jonah

嗯，Grunt只是一个任务运行器。它完全不理解连接或browserify。连接任务是一个Grunt插件。Grunt插件只是一个你可以从命令行调用的注册任务。因此，使用Browserify时，您只需使用browserify grunt插件并将其添加到工作流程中-然后您就不需要任何连接任务。就我而言，我从不使用concat任务，因为我使用RequireJs，并通过其Grunt插件自己处理连接。 - Simon Boudrias

如果供应商中存在某些依赖关系（例如，BackboneJS 依赖于 Underscore），那么我如何将它们全部合并起来而无需手动指定合并顺序？ - truongnguyen1912

@truongnguyen1912 使用依赖/模块系统。Webpack、Browserify、Require.js 等等。 - Simon Boudrias