angular.js多个js文件

Question

我有一个成长的角度应用程序，和我的index.html已经是这样的：

<script type="text/javascript" src="public/js/libs/bower/jquery/dist/jquery.min.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/spin.js/spin.js"></script> 
<script type="text/javascript" src="public/js/libs/overlay.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/angular/angular.min.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/angular-route/angular-route.min.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/angular-cookies/angular-cookies.min.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/angular-resource/angular-resource.min.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/angular-sanitize/angular-sanitize.min.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/bootstrap/dist/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="public/js/libs/jquery-shake.js"></script> 
<script type="text/javascript" src="public/js/libs/bower/pwstrength-bootstrap/dist/pwstrength-bootstrap-1.2.0.min.js"></script> 
<script type="text/javascript" src="public/js/app.js"></script> 
<script type="text/javascript" src="public/js/controllers/import.js"></script> 
<script type="text/javascript" src="public/js/controllers/login.js"></script> 
<script type="text/javascript" src="public/js/controllers/main_page.js"></script> 
<script type="text/javascript" src="public/js/controllers/manage_users.js"></script> 
<script type="text/javascript" src="public/js/controllers/new_user.js"></script> 
<script type="text/javascript" src="public/js/auth.js"></script> 
<script type="text/javascript" src="public/js/services/httpAuthInterceptor.js"></script> 
<script type="text/javascript" src="public/js/services/spinnerHttpInterceptor.js"></script> 
<script type="text/javascript" src="public/js/router.js"></script> 
<script type="text/javascript" src="public/js/utils.js"></script> 

我不希望我的index.html是一个烂摊子，Require.JS不一个选项，它必须与angularAMD一起使用，这与angular route resolve不兼容 - 这是我的应用程序的强制部分。

如何清理我的JS负载？我听说过Grunt，它如何帮助我？这只是一个任务跑步者...

Answer 1

我的建议并不是缩小角度js部分，这不是最佳实践。 试试这个grunt插件，它是一个角色构建器，它会照顾你的依赖和其他东西，只需阅读描述。你

https://www.npmjs.org/package/grunt-angular-builder

也可以使用html2js加载您的模板到$ templateCache，让您的应用程序会在您每次需要另一个模板时不会去服务器。

https://www.npmjs.org/package/grunt-html2js

如果尝试用户RequireJs或Browserify JS，它可以在某些情况下有所帮助，但它并不需要你的依赖条件和项目结构的照顾。如果你的应用程序使用requireJS和Browserify，你也会遇到编写单元测试的麻烦。所以我的建议是不要在Angular中使用这两个模块。

Answer 2

Grunt可以通过它的插件帮助很多。特别是，看看插件usemin，它可以让你把注释放在你的html上，以确定你想如何打包你的文件。然后，当你运行相关的grunt任务时，它会将<script>标签从你的html，concat中缩小并缩小与它们相关的文件，并用指向连接的&缩小结果的单个<script>标签替换它们。很漂亮。