处理 prod 中的 concat 和 dev 中的非 concat答案

【问题标题】：Handling concat in prod with non-concat in dev处理 prod 中的 concat 和 dev 中的非 concat
【发布时间】：2014-12-04 16:04:30
【问题描述】：

我目前正在处理一个大型 angular.js 项目。我使用 grunt 将我的所有文件合并/丑化为一个大的 target.js 文件，然后将其包含在我的索引页面中。

我已经意识到这使得在开发环境中进行调试变得非常困难，因为代码都在一条线上并且非常丑陋。我考虑过设置第二个 grunt 任务，使文件保持漂亮和独立（请参阅此答案：Alternate grunt.js tasks for dev/prod environments），但后来我遇到了在开发时必须在索引页面上包含所有文件的问题，但删除那些在生产环境中引用和引用丑陋的 concat 目标。

我希望找到一种解决方案，让我可以使用 grunt 将漂亮的代码保留在 dev 中，而将丑陋的 concat 代码保留在 prod 中。我考虑只是在开发时动态添加脚本标签，然后在我使用生产任务时以某种方式删除它们，但这似乎是一个可能没有必要的头痛，而且我不知道我将如何确定脚本标签需要被移除/替换。

我不是 100% 接受这种方法，因为我刚刚开始这个项目，并希望在第一时间把它做好，所以如果你有更好地处理这种情况的建议，我愿意接受这个答案也是如此。

【问题讨论】：

标签： javascript angularjs gruntjs

【解决方案1】：

解决方案是使用 grunt-usemin 和 grunt-contrib-concat 。这样你就可以定义一个资源块（css / js），只有在你执行 usemin 任务时才会连接。

例如：

index.html：

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

Gruntfile.js：

// simple build task
grunt.registerTask('build', [
  'useminPrepare',
  'concat:generated',
  'usemin'
]);

这样，文件将仅在构建时连接，让您的 index.html 将所有单个引用在 DEV 模式下保持不变

更多详情/示例，请参阅：https://github.com/yeoman/grunt-usemin

【讨论】：