如何使用 Grunt 仅包含 UI Bootstrap 的特定部分

Question

我正在使用 UI Bootstrap 的手风琴、工具提示和过渡组件。

我可以 create a custom build with the online tool 在 UI Bootstrap 网站上，这将创建一个缩小和非缩小的 JS 文件，只包含我选择的组件，没有开销。

但是，我不想使用在线工具来编译我自定义的 UI Bootstrap 版本，而是想在本地编译我自己的版本，最好使用我已经拥有的工具采用; Bower、Grunt 和 NPM。

所以我的问题是：如何在本地创建自己的 UI Bootstrap 版本？

bower install angular-ui-bootstrap，然后在 bower_components/angular-ui-bootstrap 中调用 Grunt build 创建一个 UI Bootstrap 构建，其中包括 all 模块，可能有一种方法可以只对模块的一个子集执行相同的操作，但我无法弄清楚。

Answer 1

这并不像我预期的那样容易（而且应该如此）。

看看项目的Gruntfile.js。你会看到他们做了很多。将 HTML 和 CSS 转换为 JS，以其他人可加载的方式连接所有脚本。而且文件很难定位；它甚至包括自定义任务。

为了模仿它的行为，我建议这样做：像往常一样通过 Bower 下载它。将其节点依赖项复制到您的 package.json 依赖项。然后复制 Gruntfile.js，更改他的路线，并尝试删除部分代码，直到您无法在不破坏代码的情况下删除更多行。这不是一个很好的方法，但应该会成功。

如果时间充裕，构建脚本是深度重构的理想选择。将自定义任务移动到独立文件（或项目），记录流程，并可能为某些步骤实施标准任务（例如 CSS 缩小）。

Answer 2

可以使用以下命令完成

grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN

例如，如果您要求构建仅包含 tabs 和 buttons 模块，则 grunt 命令将类似于

grunt build:tabs:buttons

生成的文件将出现在 dist 文件夹中

对于模块名称列表，检查 src 文件夹中的所有文件夹名称

这方面的文档很少，但是如果您查看 Gruntfile.js，他们会在其中注册 build 任务，他们会提到如何有选择地构建模块

如何使用 Grunt 仅包含 UI Bootstrap 的特定部分

How to include only specific parts of UI Bootstrap using Grunt

gruntjs

bower

angular-ui-bootstrap