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 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 (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 grunt-contrib-copy/grunt-contrib-concat/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!

回答1:

Not strictly an answer but for me this is no longer an issue - front end development moved on.

The solution is not using Grunt and Bower - use npm and Webpack instead. Bower differs from other package managers/build assemblers by helping you keep control of the exact assets and versions that are built in the front end. This IMHO is no longer necessary.

In the new (and improved) stack, npm pulls down the assets and Webpack enables you to easily slice up your app into separate built files to minimise file size. Simply require/import the required front end modules in your JS and Webpack does the combining for you.

The combination of npm and webpack take over most (if not all) of the functionality which Grunt (read Gulp, Broccoli et cetera) fulfilled.

来源：https://stackoverflow.com/questions/30397041/how-to-manage-bower-dependencies-when-developing-and-deploying-with-grunt-and-a