Javascript 多个脚本标记和连接+；缩小+；预处理

我有一个带有多个脚本标记的html文件（接近20个）。我决定将所有JS文件连接成一个文件，然后缩小连接的文件。我正在使用ant任务进行连接，并将这样做以实现缩小。我知道为了调试的目的，我需要提供一个非连接/非精简版本的选项（在devenv中也称为）

我想知道如何做到这一点。例如：main.html文件有20个脚本标记，我认为一种方法是使用html预处理器并有条件地包含脚本标记：

#ifdef perf
    <script src="main.min.js"></script> 
#else 
    <script src="ctrl.js"></script>
    <script src="services.js"></script>
    <script src="directives.js"></script>
    <script src="model.js"></script>
    .
    .
    .P.S
    <script src="file_no_20.js"></script>
#endif

#ifdef性能
#否则
.
.
P.S
#恩迪夫

main.min.js是使用ant构建过程中连接和缩小的文件

有更好的方法吗？这种方法的缺点是什么

谢谢， 克里斯。

---

注：考虑使用html进行预处理，如有其他建议，我们将不胜感激

Chrome支持一个很棒的功能，称为“源映射”，非常适合这一功能。我建议您阅读此处的指南以了解更多信息：

如果在缩小方面使用AngularJS，有一些警告。从文档中：

由于angular根据控制器构造函数的参数名称推断控制器的依赖关系，因此如果要缩小PhoneListCtrl控制器的JavaScript代码，其所有函数参数也将缩小，依赖关系注入器将无法正确识别服务

要克服缩小引起的问题，只需将带有服务标识符字符串的数组分配到控制器函数的$inject属性中，就像代码段（注释掉）中的最后一行所建议的那样：

PhoneListCtrl.$inject = ['$scope', '$http'];

还有一种方法可以指定此依赖项列表并避免缩小问题-使用括号表示法将要注入的函数包装到字符串数组（表示依赖项名称）中，后跟要注入的函数：

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

这两种方法都适用于任何可以由Angular注入的函数，因此由项目的样式指南决定使用哪一种

---

我建议使用标记库，类似于实现这一点。包括您的脚本，如：

<script:include src="myscript1.js" />
<script:include src="myscript2.js" />
<script:include src="myscript3.js" />
..

..

和使用页面参数为您的系统，以决定是否脚本必须连接和缩小。如下所示：

www.yourapp.com/app？debugMode=true

默认情况下，脚本是浓缩和缩小的。如果您是项目开发人员，只需添加一个页面参数，如debugMode=true。当debugMode为true时，只需按原样渲染脚本

市场上有很多这样的服务可以与您的项目集成，为您完成这项工作

---

不要每次加载页面时都压缩脚本。第一次做并缓存它，这样你就不必每次都这么做。在任何时候重新生成最新的脚本文件时，只需添加另一个参数，如？rebuild=true，以便将所有最新的文件和脚本文件切碎并缓存。你也可以用CSS做同样的事情

谢谢，我去看看。是的，我知道角度DI是如何工作的。我们一直强调要使用显式的.$inject机制。我读过，非常喜欢这个想法。这似乎与我在这里提出的问题非常相关。现在正在与Angularjs+闭包编译器争论，很快就会有机会了。再次感谢，没问题。祝你好运！