javascript - 多个脚本标签和连接+缩小+预处理

Question

我有一个包含多个脚本标签(接近 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 构建过程中合并和缩小的文件。

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

谢谢，克里斯。P.S:考虑使用 http://fmpp.sourceforge.net/对于 html 预处理，任何其他建议都表示赞赏。

Answer 1

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

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

如果您在缩小方面使用 AngularJS，则需要注意一些事项。来自文档:

Since angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not being able to identify services correctly.

To overcome issues caused by minification, just assign an array with service identifier strings into the $inject property of the controller function, just like the last line in the snippet (commented out) suggests:

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

There is also one more way to specify this dependency list and avoid minification issues — using the bracket notation which wraps the function to be injected into an array of strings (representing the dependency names) followed by the function to be injected:

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

Both of these methods work with any function that can be injected by Angular, so it's up to your project's style guide to decide which one you use.

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