Grunt、Bower 和 Bootstrap 3

Question

我的理解是 Bootstrap 3 是使用 LESS 编译的。这意味着，如果我想自定义 Bootstrap 的主题/外观，我会修改各种 LESS 文件中的变量，然后编译我的自定义 Bootstrap 库。

我的理解是 Grunt 是 JavaScript 的构建系统，它可以做诸如缩小、丑化等事情；并且它具有用于定义自定义行为的可插拔架构。

我的理解是 Bower 是一个依赖管理工具，可以独立运行（从 shell）或作为 Grunt 插件运行。

如果我到目前为止所说的任何内容不正确或具有误导性，请先纠正我！

假设我的理解或多或少是正确的，那么我的问题是：

如何同时使用 LESS、Grunt 和 Bower 来创建基于 Bootstrap 的自定义应用程序？我是否可以将 LESS 用于自定义 Bootstrap，然后使用 Bower 将该自定义 Boostrap 作为依赖项拉入我的应用程序，然后使用 Grunt 编译/缩小我的应用程序的 JS/CSS 资源？还是我在这里偏离轨道并完全偏离基地？

Answer 1

我认为你是对的。

首先下载 Bootstrap 的 master.zip，同时确保你已经安装了 Node.js 和 npm。

比运行：

1. npm install
2. grunt dist（重新编译 Boostrap、CSS 和 Javascript）

现在您可以检查Bootstrap's Gruntfile 并了解如何配置 Grunt 任务以构建和扩展 Bootstrap。

Bootstrap 不使用 Bower 进行前端包管理（尽管您也可以使用 bower 安装 Bootstrap），但 Roots Wordpress 主题确实使用了 Bower：

Roots 使用 Bower 来管理 Bootstrap、jQuery、Modernizr 和 响应.js。

您可以使用bower install --save <package-name> 安装任何软件包

Bower 使用.bowerrc 文件来安装这些软件包。