编译Bootstrap3

 

Bootstrap 使用Grunt作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。

安装 Grunt

安装 Grunt 前，你需要首先下载并安装 node.js（npm 已经包含在内）。npm 是node packaged modules的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。

然后在命令行中输入以下命令：

1、在全局环境中安装grunt-cli：npm install -g grunt-cli。

2、进入/bootstrap/根目录，然后执行npm install命令。npm 将读取package.json文件并自动安装此文件中列出的所有被依赖的扩展包。这一步比较慢，需要耐心等待。

上述步骤完成后，你就可以运行 Bootstrap 所提供的Grunt 命令了。

可用的 Grunt 命令

1、grunt dist（仅编译 CSS 和 JavaScript 文件）

重新生成/dist/目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。

2、grunt watch（监测文件的改变，并运行指定的 Grunt 任务）

监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。

3、grunt test（运行测试用例）

在PhantomJS环境中运行JSHint和QUnit自动化测试用例。

4、grunt docs（编译并测试文档中的资源文件）)

编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 bundle exec jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。

5、grunt（重新构建所有内容并运行测试用例）

编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要Jekyll工具。这些只有在你对 Bootstrap 深度研究时才有用。

如果遇到问题

如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的/node_modules/目录，然后，再次运行npm install命令。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。