构建工具

了解如何使用 Bootstrap 包含的 npm 脚本来构建我们的文档,编译源代码,运行测试等。

工具配置

Bootstrap 使用NPM脚本为其构建系统。 package.json 包含了使用框架的便捷方法,包括编译代码,运行测试等。

按照下面的步骤搭建编译环境:

  1. 下载并安装 Node.js, 我们需要用它来处理依赖关系。
  2. 进入 /bootstrap 目录,运行 npm install 安装依赖文件,这些依赖关系会在 package.json 列出。
  3. 安装 Ruby, 安装 Bundler ,运行这个命令 gem install bundler, 最后运行这个命令 bundle install. 这将安装所有 Ruby 依赖项,例如 Jekyll 和 plugins。
    • Windows 玩家: 阅读 这个文档 来让 Jekyll 无障碍地在windows系统下运行。

完成后,你将能够运行命令行提供的各种命令。

使用 NPM scripts

我们的 package.json 提供以下功能:

操作 简单说明
npm run dist npm run dist 会在 /dist 目录创建已编译的文件。 使用 Sass, Autoprefixer, and UglifyJS.
npm test npm run dist 一样,不过产出的文件会放在测试目录(另外配置的目录)。
npm run docs 创建css和js的文档. 你可以创建本地文档,通过这个命令 npm run docs-serve

运行 npm run 查看所有的 npm scripts.

Autoprefixer

Bootstrap 使用 Autoprefixer(包含在我们的构建过程中)在构建时自动将 vendor 前缀添加到某些CSS属性。 这样做可以节省我们的时间和代码,允许我们一次编写CSS的关键部分,同时不需要像v3中那样的混合vendor。

我们通过GitHub存储库中的单独文件维护通过 Autoprefixer 支持的浏览器列表。 有关详细信息,请参阅 /package.json

本地文档

提示:本地文档肯定是没有汉化的了。英文原版。

在本地运行我们的文档需要使用 Jekyll ,这是一个非常灵活的静态站点生成器,它为我们提供:基本包含,基于Markdown的文件,模板等。 下面是教程:

  1. 运行上面的工具设置,通过 bundle install 安装 Jekyll(站点构建器)和其他 Ruby 依赖项。
  2. 进入 /bootstrap 目录, 运行 npm run docs-serve
  3. 在浏览器打开 http://localhost:9001

通过阅读它来了解有关使用Jekyll的更多信息 ( Jekyll文档 )

故障排除

如果你在安装依赖项时遇到问题,请卸载所有以前的依赖项版本(全局和本地)。 然后执行 npm install