css - Grunt、Bower 和 Bootstrap 3

Question

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

我的理解是Grunt是一个用于 JavaScript 的构建系统，可以执行缩小、丑化等操作；并且它具有用于定义自定义行为的可插入架构。

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

如果到目前为止我所说的任何内容都是不真实的或被误导的，请先纠正我!

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

我如何结合使用 LESS、Grunt 和 Bower 来创建基于 Bootstrap 的自定义应用程序？我会为自定义 Bootstrap 使用 LESS，然后使用 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 uses Bower for managing Bootstrap, jQuery, Modernizr, and Respond.js.

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

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