javascript - 处理 prod 中的 concat 和 dev 中的非 concat

Question

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

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

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

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

Answer 1

解决方案是使用 grunt-usemin和 grunt-contrib-concat 。这样您就可以定义一个资源 block (css/js)，仅当您执行 usemin 任务时才会连接该资源 block 。

例如:

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