Including external JS files in Angular project after using Grunt (via Yeoman)

Question

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

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.

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

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>

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.

Answer 1

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

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.