2

我正在尝试建立一个带有 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. 我试图将其保留bower_components在dist文件夹之外以保持开发和部署的分离（即使在开发期间该站点是从 提供的dist）。

因为我是新手，所以我在制定正确的 grunt/bower 模块以及开发和部署的最佳实践方面完全没有想象中的失败（是的，Yeoman 处理了很多，但我正在努力学习）。我目前的愿景是：

  1. Connect 提供dist文件夹中的 HTML 页面。
  2. 在开发中，凉亭组件将自动包含在页面中（wiredep），但需要从dist文件夹中提供（grunt-wiredep-copy）。
  3. 在部署中，bower 组件将获取缩小版本并将它们与项目 JS 和 CSS 文件连接起来，或者只是将 bower 组件连接到单个 JS 和 CSS 文件中。

我的问题是：在开发中使用 Bower 组件的（或一种）好方法是什么，并使用最少的grunt-contrib-copy / grunt-contrib-concat / grunt-string-replace或此类模块来部署目标以移动文件并重写HTML 参考资料？或者这一步是否总是有很高的手动元素 - 这对我来说似乎很奇怪，因为凉亭和咕噜声像肯德基薯条和“土豆和肉汁”一样一起出现。

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

4

1 回答 1

0

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

解决方案不使用 Grunt 和 Bower - 而是使用npm和Webpack。Bower 与其他包管理器/构建组装器的不同之处在于帮助您控制前端构建的确切资产和版本。恕我直言，不再需要。

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

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

于 2016-05-12T09:16:44.803 回答