Question

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

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

我希望找到一个解决方案，允许我使用grunt在dev中保存漂亮的代码和丑陋的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

在dev中使用非concat处理concat

1 个答案: