用dev中的非concat处理prod中的concat

Question

我目前正在做一个大型angular.js项目。我使用grunt将所有文件连接到一个大的target.js文件中，然后将其包含在索引页面上。

我已经意识到，这使得在开发环境中调试变得非常困难，因为代码都在一行上，而且非常难看。我曾考虑过设置第二个grunt任务，使文件保持美观和独立（请参阅以下答案：用于dev/prod环境的备用grunt.js任务），但后来我遇到了一个问题，即在开发时必须将索引页上的所有文件都包括在内，但在生产中删除了这些引用，只引用了丑陋的concat目标。

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

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

Answer 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