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

Question

我正在尝试通过两个任务建立一个具有 bower 依赖项的 Grunt 项目：development 和 deploy。项目文件夹结构目前如下所示：

.
├── 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 负责很多这方面的工作，但我努力学习）。我目前的愿景是：

Connect 提供 dist 文件夹中的 HTML 个页面。
在开发中，Bower 组件会自动包含在页面中 (wiredep)，但需要从 dist 文件夹 (grunt-wiredep-copy) 中提供。
在部署中，Bower 组件将获取缩小版本并将它们与项目 JS 和 CSS 文件连接，或者仅将 Bower 组件连接在单个 JS 和 CSS 文件中。

我的问题是：在开发中使用 Bower 组件的（或）好的方法是什么，并且使用最少的 grunt-contrib-copy/grunt-contrib-concat/grunt-string-replace 或此类模块来部署目标以移动文件周围并重写 HTML 引用？或者这一步是否总是有很高的手动元素 - 这对我来说似乎很奇怪，因为 bower 和 grunt 像肯德基芯片和 'potato and gravy'.

JS 和 LESS/CSS 连接很容易，每种类型都有相应的 uglify 和 minify grunt 模块。 Bower 文件被排除在这些进程之外，并且 wiredep 和 wiredepCopy 似乎没有为部署任务提供 "clean up"（minify/concatenate 并更新 HTML 文件中的相应链接）的简单方法。在开发任务期间，wiredepCopy 甚至不更新 HTML 中对移动文件的引用，这对我来说似乎很奇怪（并请求合并请求）。也许 wiredep 不是前进的方向？谢谢！

Answer 1

不是严格意义上的答案，但对我来说这不再是问题 - 前端开发继续进行。

解决方案不使用 Grunt 和 Bower - 使用 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。不再需要这个恕我直言。

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

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

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

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

javascript

gruntjs

bower

grunt-wiredep