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自动完成API，我的autocomplete.js指令依赖于Google自动填充功能公开的变量。在我运行grunt --force之前，这完全正常。但是在运行grunt --force之后，我的所有JS文件都被缩小并编译在一起，这就是造成我问题的原因。

我通过从＆＃34; http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false＆＃34;抓住脚本来证实了这一点。并将结果保存到临时JavaScript文件中，并使用此新临时文件替换对Google API的调用。这可行，但它是一个黑客，并且当谷歌修改任何代码（经常发生）时，它是不可持续的。

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

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

在我的index.html中并没有让grunt在缩小过程中包含它？我非常感谢任何帮助，因为我也很擅长使用Grunt。

Answer 1

由于它会导致您出现问题，为什么不在构建代码之外异常排除这个脚本引用，只是从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 lib，你的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>

不是重大灾难，对吧？

顺便说一句，所有这些类型的东西正是我切换到早午餐的原因。从那以后再也没有回头。

使用Grunt后，在Angular项目中包含外部JS文件（来自Yeoman）

1 个答案: