Is there any automated [grunt] task to prepend a CDN to CSS/JS files inside your index.html?

Question

Working with yeoman generator-angular, it assumes that you want to put your css and scripts files in the same server as your index.html file. It generates a dist/index.html file that looks like:

<link rel="stylesheet" href="styles/7d151330.main.css">
<script src="scripts/6f9c9a13.scripts.js"></script>
<script src="scripts/bd6ce9e3.plugins.js"></script>
<script src="scripts/ec88f033.modules.js"></script>

However, I'd like to host the CSS/JS files on a different server and prepended with the URL:

<link rel="stylesheet" href="//mycdn.com/styles/7d151330.main.css">
<script src="//mycdn.com/scripts/6f9c9a13.scripts.js"></script>
<script src="//mycdn.com/scripts/bd6ce9e3.plugins.js"></script>
<script src="//mycdn.com/scripts/ec88f033.modules.js"></script>

I believe this is the YSLOW best practice and is in fact being used by the stackoverflow page you are currently looking at (view source to see their note on https://cdn.sstatic.net/) Having different CDNs doesn't seem to be possible yet with the grunt-google-cdn plugin

My current thought is to perform a search and insert on:

<script src="[INSERTHERE]scripts/
<link rel="stylesheet" href="[INSERTHERE]styles/ 

UPDATE: There are several grunt plugins that perform a search/replace so this may be the best route.

Any additional suggestions to get a CDN url prepended during a grunt build?

Answer 1

I was looking for the same functionality and it seems like this package would do the job: https://github.com/tactivos/grunt-cdn

Answer 2

This does the job https://www.npmjs.org/package/grunt-cdnify For the standard use case, just set a base string for your URLs – eg, '//cdn.example.com/'. The cdnify task will automatically search for all local URLs in your files, and prefix them with this string. (It will automatically avoid adding double-slashes.)