4

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

我想知道如何实现这一目标。例如：文件 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

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

有没有更好的方法来做到这一点？这种方法的缺点是什么？

谢谢，克里斯。PS：考虑使用http://fmpp.sourceforge.net/进行 html 预处理，任何其他建议表示赞赏。

4

2 回答 2

1

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

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

如果您在缩小方面使用 AngularJS，有一些注意事项。从文档：

由于 Angular 从控制器构造函数的参数名称推断控制器的依赖关系，如果您要缩小 PhoneListCtrl 控制器的 JavaScript 代码，它的所有函数参数也将被缩小，并且依赖注入器将无法识别正确服务。

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

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

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

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

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

http://docs.angularjs.org/tutorial/step_05

于 2012-06-03T18:55:06.173 回答
1

我建议使用标签库，例如http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags4.html#67771来实现这一点。包括您的脚本，例如：

<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 时，只需按原样渲染脚本。

市场上有许多服务，例如http://developer.yahoo.com/yui/compressor/可以与您的项目集成来为您完成这项工作。

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

于 2012-08-23T10:21:14.213 回答