angularjs - 使用 Grunt 后在 Angular 项目中包含外部 JS 文件(通过 Yeoman)

Question

这是我最近遇到的问题。我正在构建一个 Angular 项目，并使用 Grunt 作为工作流程的一部分来缩小 JavaScript 文件。这是我的 index.html 文件中的一个片段(我使用 Yeoman 构建了该项目):

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- more bower component scripts -->
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/someCtrl.js"></script>
<script src="scripts/controllers/anotherCtrl.js"></script>
<script src="scripts/services/someSvc.js"></script>
<script src="scripts/services/anotherSvc.js"></script>
<!-- Below is the issue -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="scripts/directives/autocomplete.js"></script>
<!-- endbuild -->

基本上，倒数第二个脚本使用 Google 的 Autocomplete API，而我的 autocomplete.js 指令取决于 Google Autocomplete 公开的变量。在我运行 grunt --force 之前，这工作得很好。但是运行 grunt --force 后，我所有的 JS 文件都被缩小并编译在一起，这就是导致我的问题的原因。

我通过从“http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false ”获取脚本并将结果保存到临时 JavaScript 文件中并用这个新的临时文件替换对 Google API 的调用来确认这一点。这是可行的，但它是一种黑客攻击，并且当 Google 修改任何代码时(这种情况经常发生)，将无法持续。

因此，我的问题是是否有办法包含以下脚本标记:

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

在我的index.html中并且没有grunt将其包含在缩小过程中？任何帮助将不胜感激，因为我对使用 Grunt 也相当陌生。

Answer 1

既然它给你带来了问题，为什么不异常(exception)地将这个脚本引用排除在构建标签之外，并从你的index.html中按原样调用它呢？

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/someCtrl.js"></script>
<script src="scripts/controllers/anotherCtrl.js"></script>
<script src="scripts/services/someSvc.js"></script>
<script src="scripts/services/anotherSvc.js"></script>
<script src="scripts/directives/autocomplete.js"></script>
<!-- endbuild -->

最终结果将是 html 中的 3 个 js 引用:API 库、vendor.js 和 script.js。像这样的事情:

<script src="scripts/vendor.d3a1cfb5.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
<script src="scripts/scripts.ad4decc0.js"></script>  

不是一场重大灾难，对吧？

顺便说一句，所有这些类型的东西正是我转向早午餐的原因。从此再也没有回头。