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

Question

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

.
├── 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 像肯德基薯条和“土 bean 和肉汁”一样一起出现。

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

Answer 1

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

解决方案不使用 Grunt 和 Bower - 使用 npm和 Webpack反而。 Bower 与其他包管理器/构建组装器的不同之处在于可以帮助您 keep control of the exact assets and versions that are built in the front end .不再需要这个恕我直言。

在新的(和改进的)堆栈中，npm 提取 Assets ，而 Webpack 使您能够轻松地将您的应用程序分割成单独的构建文件，以最大限度地减少文件大小。只需在您的 JS 中要求/导入所需的前端模块，Webpack 就会为您进行组合。

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