Grunt file output static assets point to specified URL

Question

In my index file, I have something like this:

<!-- build:js({.tmp,app}) scripts/main.js -->
    <script src="scripts/foo.js"></script>
    <script src="scripts/bar.js"></script>
<!-- endbuild -->

Which then outputs to my dist like this:

<script src="scripts/cce9cd3a.main.js"></script>

What I'm trying to do is modify the way the dist is rendered so it says something like:

<script src="https://s3.amazonaws.com/etc/etc/static/scripts/cce9cd3a.main.js"></script>

The idea is I want it to output to the dist folder in the same way, which I will move over to s3. What is a clean way to prepend all of my static assets to the same static serve url using grunt?

Answer 1

Based upon the discussion we had in comments, you have two general options after grunt-usemin does it's work.

1) Find-and-replace from the shell.

If you are using a *nix system with grep and similar tools, you can put the file someplace easy to grep and replace. For example, you could change your build blocks to something like:

<!-- build:js({.tmp,app}) awsreplacepath/main.js -->
    <script src="scripts/foo.js"></script>
    <script src="scripts/bar.js"></script>
<!-- endbuild -->

so you get something like:

<script src="awsreplacepath/cce9cd3a.main.js"></script>

Then use a grep-and-replace shell script, like the one discussed in these questions to replace the awsreplacepath with the path to want referenced.

• How to grep and replace
• How to find and replace all occurrences of a string recursively in a directory tree?

2) Find-and-replace before grunt finishes.

There are a few find-and-replace plugins for grunt, but grunt-string-replace seems to have the most usage according to npmjs.org.

This isn't really much different than the first option.

In both cases, the regex should be simple as you can pick a string that is essentially certain to be unique...so you won't need to do much more than drop something like 'awsreplacepath' into the regex.

...and just remember that the main.js file usemin generated and that you need to move will still be in the awsreplacepath directory. All we're doing is changing the HTML to prevent you from having to edit the file yourself.