Bower 和文件夹结构

Question

假设我要安装 jQuery UI。我执行命令 bower install jquery-ui，Bower 将下载：

.
├── bower_components
│   ├── jquery
│   │   ├── dist
│   │   │   ├── jquery.js
│   │   │   └── jquery.min.js
│   │   └── src
│   └── jquery-ui
│       ├── themes
│       │   ├── smoothness
│       │   │   ├── jquery-ui.css
│       │   │   └── jquery-ui.min.css
│       │   └── [The rest of jQuery UI's themes]
│       ├── ui
│       │   ├── accordion.js
│       │   ├── autocomplete.js
│       │   └── ...
│       ├── jquery-ui.js
│       └── jquery-ui.min.js
└── index.html

下载完成后，将文件包含在我的 index.html 中，我将不得不写一些类似 bower_components/jquery/dist/jquery.min.js、bower_components/jquery-ui/jquery-ui.min.js 和 css bower_components/jquery-ui/themes/smoo...等

我习惯于使用更简单的文件夹结构，如下所示：

.
├── css
│   ├── main.css
│   └── slider.css
├── js
│   ├── jquery.min.js
│   └── jquery-ui.min.js
├── index.html
├── contact.html
└── pricing.html

我想知道是否有任何方法可以让 bower 自动将 dist 文件下载到我的 css, js 文件夹，而不管我正在安装什么？

Answer 1

Bower 用于一件事 - 获取这些组件的最新版本并确保您获得所需的所有文件。

Bower 只做一项工作，并用作 "build pipeline" 的一部分。然后你应该使用第二个工具，比如 Grunt or Gulp，或者如果你愿意，只使用带有复制命令的批处理 file/shell 脚本，只将你需要的文件从 bower_components 复制到您想要的文件夹结构。使用 Grunt 和 Gulp，此步骤还可以包括脚本和样式表的捆绑或缩小，甚至将图像转换为 sprite 表。

就是说，如果您不介意转储所有 Bower 将从某个组件拉下来的文件到您的结构中（可能会留下很多垃圾，您不会想要，考虑到你问题中的细节），你可以 use the .bowerrc file 更改输出目录。

(TL;DR: Bower 就像宜家，以平板包装运送零件 - 你不能把包裹放在客厅里并期望它已经是 table，但你可以写一些东西知道包中有什么并且 assemble 正是您想要的，而无需手动寻找各个部分。或者您可以只打开一次包并手动获取您想要的东西，而不再使用 Bower - 没有任何问题那个。)

Answer 2

我使用 wiredep 和 gulp.js 或 Grunt.js 来包含我的应用程序需要的任何依赖项：

它允许您自动插入您的应用程序需要的任何 bower 包运行。将 "wiredep" 作为任务添加到任何 gulp.js 或 Grunt.js 构建任务中。

Bower 和文件夹结构

Bower and folder structure

bower

bower-install