构建工具

学习如何使用 Bootstrap 内置的 npm 脚本来构建文档、编译源码、执行测试等。

工具设置

Bootstrap 基于 NPM scripts 实现的构建系统。在 package.json 文件中包含了大量便捷的方法用于编译源码、执行测试等日常任务。

如需使用我们的构建系统并在本地运行文档，你需要一份 Bootstrap 源码并安装 Node.js。然后按照如下步骤开始即可：

  1. 下载并安装 Node.js，用于管理项目依赖。
  2. 进入 /bootstrap 根目录并运行 npm install 命令将 package.json 文件中列出的所有依赖包安装到本地。
  3. 安装 Ruby；运行 gem install bundler 命令安装 Bundler；最后运行 bundle install 命令，此命令将安装所有 Ruby 依赖包，例如 Jekyll 和 插件。
    • Windows 用户注意： 请阅读 这份指南 以了解如何安装 Jekyll 并让它成功运行。

完成上述步骤后，你就可以在命令行中运行我们所提供的所有命令了。

使用 NPM 脚本

我们的 package.json 文件中包含了如下命令（commands）和任务（tasks）：

任务（Task） 描述
npm run dist npm run dist 创建 /dist 目录并保存编译后的文件。 用到了 Sass、Autoprefixer 和 UglifyJS 工具。
npm test 与 npm run dist 一样，只是增加了运行本地测试的环节
npm run docs 为文档构建 CSS 和 JavaScript 文件。你可以通过运行 npm run docs-serve 命令在本地启动文档站点。

运行 npm run 命令可以查看所有 npm 脚本。

Autoprefixer

Bootstrap 利用 Autoprefixer （包含在构建流程中）自动为某些 CSS 属性添加浏览器厂商特定的前缀。Autoprefixer 帮我们节约了编码时间，并且让我们无需像 Bootstrap v3 版本中一样使用 mixins 添加特定浏览器厂商的前缀了。

我们在自己的 GitHub 仓库中维护了一份 Autoprefixer 所支持的浏览器列表。请查看 /package.json 文件以了解详细信息。

在本地运行文档

在本地运行文档需要使用 Jekyll，Jekyll 是一个非常灵活的静态网站生成工具，提供的功能包括：文件包含、支持 Markdown 文件、模板等等。以下是使用方法：

  1. 按照上面所列出的 工具设置 步骤安装 Jekyll（网站构建工具），并利用 bundle install 安装其他的 Ruby 依赖包。
  2. 在根目录 /bootstrap 下面，在命令行中运行 npm run docs-serve 。
  3. 打开浏览器并输入 http://localhost:9001 网址，然后就大功告成了。

如需了解更多关于 Jekyll 的知识，请参考 Jekyll 文档。

故障排除

如果你在安装依赖包时遇到问题，首先卸载所有之前安装的依赖包（无论是全局还是本地安装的），然后重新运行 npm install 命令。