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>標籤替換它們。很漂亮。