编译工具

了解如何使用Bootstrap包含的npm(nodejs)命令来编译(构建、调试与生成)最终文档、源代码、执行测试等。

编译前环境部署

Bootstrap 使用 NPM脚本 来构建整个系统,其中系统的package.json 中明定义了使用框架的方便的方法,包括编译代码,运行测试等.

要使用我们的构建系统(进行编译)并在本地运行我们的文档,首先需要一个Bootstrap的源文件和Nodejs安装程序副本。如果你应该已经准备好开始动手,让我们一起参照下面的步骤启动来实施:

  1. 下载并安装Node.js, 我们用它来管理我们的依赖关系。
  2. 执行Nodejs命令并导航到 /bootstrap 的根目录,然后运行 npm install 命令来安装 package.json中所定义的本地相依赖项目。
  3. 安装 Ruby, 通过运行 gem install bundler命令来安装 Bundler,完成后运行 bundle install,这样就安装了所有的 Ruby 依赖关系,比如 Jekyll和其它插件.
    • Windows操作系统用户: 运行Jekyll时可参照阅读本指南 并进行故障排查。

完成后,你就可以通过命令行来执行丰富的指令了。

使用NPM(nodejs)脚本

我们的 package.json 包括了下面的命令和任务:

事务 描述
npm run dist npm run dist 创建 /dist 目录及其下面的文件, 调用Sass、AutoprefixerUglifyJS进程。
npm test npm run dist 相同,在本地进行测试。
npm run docs 编译生成本地CSS、JavaScript文档,完成后你可以通过npm run docs-serve命令在本地运行生成的文档。

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

Autoprefixer 浏览器前缀定义程式

Bootstrap 使用Autoprefixer 在编译时(及编译过程中)自动将浏览器厂商的个性前缀(如ms-、webkit-)添加到某些CSS属性上,这可以节省开发者编写BootStrap的时间和代码,允许我们单独编写CSS的关键部分,同时消除对v3中发现的供应商混合问题带来的隐患。

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

本地文档

本地文档我们是采用Jekyll工具来编译的(Jekyll是一个将纯文本转化为静态网站和博客的工具,通过Nodejs命令行运行), 这是一个非常灵活的静态站点生成器,它为我们提供:文件结构、基于Markdown的文件、模板等。以下是如其部署方法:

  1. 运行前一段的 编译前环境部署 安装Jekyll(站点构建器)和其他Ruby依赖项,命令: bundle install
  2. /bootstrap 根目录,运行n npm run docs-serve 命令行。
  3. 在浏览器打开 http://localhost:9001 网址,大功造成!

更多教程请移步Jekyll官网文档中心

故障排除

如果你在安装依赖关系或者运行 Grunt 命令时遇到了麻烦,请卸载所有之前的依赖关系版本(服务器中的和本地的),然后运行 npm install从头再来。