javascript - How to manage bower dependencies when developing and deploying with grunt and a dist project folder?

I am trying to set up a Grunt project with bower
dependencies with two tasks: development and
deploy. The project folder structure currently looks like
this:

.
├──
            bower_components
│   ├── animate.css

│   ├──
            jquery
│   ├── semantic-ui
│   └── wow
├──
            dist
│   └── assets
│ ├── styles
│ └── js
├──
            node_modules
└── src
 └── assets

 ├──
            less
 └──
            js

I am currently
using rel="nofollow">grunt-wiredep to automagically include the bower
dependencies in the HTML files in dist. I am trying to keep the
bower_components out of the dist
folder to keep a separation of development and deploy (even though during development
the site is served from
dist).

As I am new to
this I am having a complete imagination failure in working out the right grunt/bower
modules and best practice for developing and deploying (yes Yeoman takes care of a lot
of this, but I am trying to learn). My current vision
is:

1. Connect serves the
   HTML pages from the dist
   folder.



2. In development bower components would
   be automatically included in the page (wiredep) but need to be served from within the
   dist folder ( href="https://www.npmjs.com/package/grunt-wiredep-copy"
   rel="nofollow">grunt-wiredep-copy).


3. In
   deploy the bower components will grab the minified versions and concatenate them with
   either the project JS and CSS files, or just the bower components in a single JS and CSS
   file.

My
question is: what is the (or a) good way to use bower components in
development and deploy targets with minimal href="https://github.com/gruntjs/grunt-contrib-copy"
rel="nofollow">grunt-contrib-copy/ href="https://github.com/gruntjs/grunt-contrib-concat"
rel="nofollow">grunt-contrib-concat/ href="https://github.com/erickrdch/grunt-string-replace"
rel="nofollow">grunt-string-replace or such modules to move files around
and rewrite HTML references? Or will this step always have a high manual element to it -
which seems odd to me given bower and grunt go together like KFC chips and 'potato and
gravy'.

JS and LESS/CSS concatenation is easy
with each types respective uglify and minify grunt modules. Bower files are excluded
from these processes and wiredep and wiredepCopy don't appear to provide a simple way to
"clean up" (minify/concatenate and update the respective links in HTML files) for the
deploy task. wiredepCopy doesn't even update references in the HTML during the
development task to the moved files which seems odd to me (and begging for a Pull
Request). Maybe wiredep is not the way forward? Thanks!