我正在尝试建立一个具有 Bower 依赖项的 Grunt 项目，其中包含两个任务：发展 and deploy。目前项目文件夹结构如下所示：
.
├── bower_components
│ ├── animate.css
│ ├── jquery
│ ├── semantic-ui
│ └── wow
├── dist
│ └── assets
│ ├── styles
│ └── js
├── node_modules
└── src
└── assets
├── less
└── js
我目前正在使用咕噜电线德普 https://github.com/stephenplusplus/grunt-wiredep自动将 Bower 依赖项包含在 HTML 文件中dist。我正在努力保持bower_components出于dist文件夹以保持开发和部署的分离（即使在开发期间，站点由dist).
由于我是新手，我在制定正确的 grunt/bower 模块以及开发和部署的最佳实践方面完全缺乏想象力（是的，Yeoman 处理了很多事情，但我正在努力学习）。我目前的愿景是：
- Connect 提供 HTML 页面
dist folder.
- 在开发中，Bower 组件将自动包含在页面（wiredep）中，但需要从内部提供服务
dist文件夹 （grunt-wiredep-复制 https://www.npmjs.com/package/grunt-wiredep-copy).
- 在部署时，bower 组件将获取缩小版本并将它们与项目 JS 和 CSS 文件连接起来，或者仅将 Bower 组件连接到单个 JS 和 CSS 文件中。
我的问题是：在开发中使用 Bower 组件并以最少的成本部署目标的（或）好方法是什么？grunt-contrib-复制 https://github.com/gruntjs/grunt-contrib-copy/grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-concat/grunt 字符串替换 https://github.com/erickrdch/grunt-string-replace或者这样的模块来移动文件并重写 HTML 引用？或者这一步总是有很高的手动元素——这对我来说似乎很奇怪，因为凉亭和咕噜声就像肯德基薯条和“土豆和肉汁”一样在一起。
JS 和 LESS/CSS 连接对于每种类型各自的 uglify 和 minify grunt 模块都很容易。 Bower 文件被排除在这些进程之外，并且wiredep 和wiredepCopy 似乎没有为部署任务提供一种简单的方法来“清理”（缩小/连接并更新HTML 文件中的相应链接）。在开发任务期间，wiredepCopy 甚至不更新 HTML 中对移动文件的引用，这对我来说似乎很奇怪（并请求 Pull 请求）。也许wiredep不是前进的方向？谢谢！
严格来说这不是一个答案，但对我来说这不再是一个问题——前端开发继续前进。
解决方案不是使用 Grunt 和 Bower - 使用npm http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/ and Webpack http://webpack.github.io反而。 Bower 与其他包管理器/构建汇编器的不同之处在于可以帮助您控制前端构建的确切资产和版本 https://stackoverflow.com/questions/21198977/difference-between-grunt-npm-and-bower-package-json-vs-bower-json。恕我直言，这个不再需要了。
在新的（和改进的）堆栈中，npm 会提取资源，而 Webpack 使您能够轻松地将应用程序分割成单独的构建文件，以最大限度地减少文件大小。只需在 JS 中 require/import 所需的前端模块，Webpack 就会为您进行组合。
npm 和 webpack 的组合接管了 Grunt（例如 Gulp、Broccoli 等）所实现的大部分（如果不是全部）功能。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
