Only Find and Copy the Images referenced in the CSS File using Grunt

I've got a single page webapp (index.html), I built this using a responsive template I purchased so the template came with 100s of icons and images that I could use.

I pick and choose which images during the development stage, but when it comes to building a version of the app to deploy I need to manually go through the main CSS and HTML file and make a list of images used and copy them over. This is not the ideal solution of course and I'd like to automate this "find and build" stage.

The structure of the app is like so:

images/
------ icons/
------ logos/
------ tab/
------ slides/

css/
------ compiled/main.css

js/
------ main.js

index.html

I've been looking for a Grunt plugin that can go through my only main CSS file (compiled/main.css) and find all the images I ended up using. This CSS file is fairly large. It should then copy only those images into a "build" folder which looks like so:

build/
------ images/
------ css/
------ js/

index.html

Within the "build/images" folder it should also maintain the folder structure as needed in CSS so the reference dont break.

e.g. when I run the task:

it finds this snippet in the main.css file -

#hero.bg {
 background-image: url("images/slides/hello.jpeg");
}

and makes a folder like so: "build/images/slides"

and copies the 'hello.jpeg' into it.

Does anyone if there is such a Grunt plugin already available, if not, I could write it but I don't want to reinvent the wheel.

If possible, I'd like to take it one step further and also look in the index.html file for image links and copy them over too.

Thanks very much,