在使用Grunt（通过Yeoman）后将外部JS文件包含在Angular项目中

Question

在使用Grunt（通过Yeoman）后将外部JS文件包含在Angular项目中

3

最近我遇到了一个问题。我正在构建一个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 -->

基本上，倒数第二个脚本正在使用谷歌的自动完成 API，并且我的 autocomplete.js 指令依赖于谷歌自动完成暴露的变量。在我运行 grunt --force 之前，这非常完美地工作。但是在运行 grunt --force 之后，所有的 JS 文件都被压缩和编译在一起，这就是导致问题的原因。

我通过从 "http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false" 获取脚本并将结果保存到一个临时 JavaScript 文件中来确认这一点，然后用这个新的临时文件替换对谷歌 API 的调用。这样可以解决问题，但这是一种 hack，当谷歌修改任何代码（经常发生）时，这种方法无法持续使用。

因此，我的问题是是否有一种方法可以包含以下脚本标记：

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

在我的index.html文件中，如何让grunt不将其包含在缩小过程中？由于我对使用Grunt也相当新手，所以非常感谢您的帮助。

- wmock

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- montecruiseto · Accepted Answer

既然这个脚本引用给您带来问题，为什么不例外地将其排除在构建标签之外，并直接从您的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个JavaScript参考文件：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>

不算什么大灾难，对吧？

顺便说一下，这就是我转换到 Brunch 的原因。从那以后再也没有回头过。