包括角项目外部JS文件使用咕噜后（通过约曼） [英] Including external JS files in Angular project after using Grunt (via Yeoman)

问题描述

这是我最近遇到的问题。我建立一个角的项目并使用咕噜作为我的工作流的一部分来缩小我的JavaScript文件。下面是从我的index.html文件的片段（我用约曼脚手架出项目）：

This is problem I've run into lately. I'm building an Angular project and using Grunt as part of my workflow to minify my JavaScript files. Here's a snippet from my index.html file (I used Yeoman to scaffold out the project):

<!-- 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指令取决于获得由谷歌自动完成暴露变量。以前我跑咕噜--force这工作完全正常。但运行咕噜--force后，我所有的JS文件精缩并一起编译，这是什么导致我的问题。

Basically, the second to last script is using Google's Autocomplete API and my autocomplete.js directive depends on variables that get exposed by Google Autocomplete. This works perfectly fine before I run grunt --force. But after running grunt --force, all my JS files are minified and compiled together and this is what's causing my problem.

我从 HTTP抓住了脚本证实了这一点/maps.googleapis.com/maps/api/js?libraries=places&sensor=false 并保存结果到一个临时JavaScript文件，以及与此新的临时文件替换调用谷歌的API。而这个工作，但它是一个黑客并不会当谷歌修改任何code的（这经常发生）。可持续

I confirmed this by grabbing the script from "http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false" and saving the results into a temporary JavaScript file, and replacing the call to Google's API with this new temporary file. And this works but its a hack and won't be sustainable when Google modifies any of the code (which happens often).

所以，我的问题是，是否有对我来说包括以下script标签的方式：

Therefore, my question is whether there's a way for me to include the following script tag:

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

在我的index.html，而不是有呼噜声将其包含在缩小过程？任何帮助将大大AP preciated因为我还相当新的使用咕噜。

in my index.html and not have grunt include it in the minification process? Any help would be greatly appreciated since I'm also fairly new to using Grunt.

推荐答案

由于它是造成你的问题，为什么不是特别排除这一个脚本参考生成标签之外，只是把它作为从您的index.html？

Since it's causing you problems, why not exceptionally exclude this one script reference outside of the build tags and just call it as is from your 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。事情是这样的：

The end result would be 3 js references in your html: the API lib, your vendor.js and script.js. Something like this:

<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>  

不是一个大灾难，对吧？

Not a major disaster, right?

顺便说一句，这一切类型的东西就是为什么我切换到早午餐。从来没有回头至今。

Incidentally, all this type of stuff is exactly why I switched to Brunch. Never looked back since.

这篇关于包括角项目外部JS文件使用咕噜后（通过约曼）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！