在使用grunt和dist项目文件夹进行开发和部署时，如何管理bower依赖？

Question

我正在尝试使用Grunt项目设置包含两个任务的Bower依赖项：开发和部署。目前，项目文件夹结构如下：

.
├── bower_components
│   ├── animate.css
│   ├── jquery
│   ├── semantic-ui
│   └── wow
├── dist
│   └── assets
│       ├── styles
│       └── js
├── node_modules
└── src
    └── assets
        ├── less
        └── js

我目前正在使用grunt-wiredep自动将Bower依赖项包含在dist中的HTML文件中。我试图将bower_components保留在dist文件夹之外，以保持开发和部署的分离（尽管在开发过程中，网站是从dist提供服务的）。

由于我对此还不熟悉，因此在找到正确的grunt/bower模块和最佳实践来开发和部署方面，我完全想象力不足（是的，Yeoman可以处理很多内容，但我正在尝试学习）。我的当前设想是：

1. Connect从dist文件夹提供HTML页面。
2. 在开发过程中，Bower组件将自动包含在页面中（wiredep），但需要从dist文件夹内提供服务（grunt-wiredep-copy）。
3. 在部署中，Bower组件将获取缩小版本，并将它们与项目JS和CSS文件合并，或者仅与单个JS和CSS文件中的Bower组件合并。

我的问题是：在开发和部署目标中，使用bower组件的最佳方法是什么（或者是一个好方法），并且最小化grunt-contrib-copy/grunt-contrib-concat/grunt-string-replace或类似模块移动文件和重写HTML引用？或者这一步始终会有很高的手动元素-这对我来说似乎很奇怪，因为bower和grunt就像KFC薯条和“土豆泥”一样搭配。

JS和LESS/CSS合并很容易，每种类型都有相应的uglify和minify grunt模块。但是，bower文件被排除在这些过程之外，wiredep和wiredepCopy似乎没有提供一种简单的方式来“清理”（压缩/合并并更新HTML文件中的相应链接）以进行部署任务。甚至在开发任务期间，wiredepCopy也不会更新HTML中对已移动文件的引用，这对我来说似乎很奇怪（并恳求拉取请求）。也许wiredep不是前进的方向？谢谢！

- mummybot

---

刚在另一个工单上发现了这条评论，谈论到grunt-usemin https://dev59.com/TmQn5IYBdhLWcg3wiHjl#16762060。我可能会尝试探索一下它 - 看起来很有前途。 - mummybot

另外，阅读其他评论时，有人认为永远不要编译或连接缩小的库文件（如jquery等），因为它会破坏缓存，特别是在更新时。话虽如此，请求越少越好，如果一个项目有很多依赖库，那么将它们连接起来可能会提高性能。 - mummybot

Answer 1

虽然这不是一个严格的答案，但对我来说，这已经不再是问题了 - 前端开发已经改变了。

解决方案是不使用 Grunt 和 Bower - 改用 npm 和 Webpack。Bower 与其他包管理器/构建组合工具不同，它可以帮助您掌控构建在前端的确切资产和版本，但我认为这已不再必要。

在新的（和改进的）堆栈中，npm 下载资产，而 Webpack 则使您能够轻松将应用程序分成单独的构建文件以最小化文件大小。只需在 JS 中要求/导入所需的前端模块，Webpack 就会为您进行组合。

npm 和 webpack 的组合接管了大多数（如果不是全部）Grunt（阅读 Gulp、Broccoli 等）所实现的功能。

- mummybot