构建工具

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

工具设置步骤

Bootstrap将 npm scripts 用于其构建系统。 我们的 package.json 包括使用该框架的便捷方法,包括编译代码,运行测试等。

要使用我们的构建系统并在本地运行我们的文档,您需要一份Bootstrap的源文件和Node的副本。 请按照以下步骤操作,您应该已经准备就绪:

  1. Download and install Node.js,用于管理依赖项。
  2. 导航到根目录/ bootstrap,然后运行npm install安装依赖在 package.json.
  3. Install Ruby, 用gem install bundler安装 Bundler,最后运行bundle install。 这将安装所有Ruby依赖项,例如Jekyll和插件。
    • Windows 用户: 阅读 this guide 以使Jekyll正常运行。

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

使用npm脚本

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

命令 描述
npm run dist npm run dist creates the /dist/ directory with compiled files. Uses Sass, Autoprefixer, and UglifyJS.
npm test Same as npm run dist plus it runs tests locally
npm run docs Builds and lints CSS and JavaScript for docs. You can then run the documentation locally via npm run docs-serve.

运行npm run查看所有npm脚本。

自动前缀

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

我们将通过Autoprefixer支持的浏览器列表保存在GitHub存储库中的单独文件中。 有关详细信息,请参见 .browserslistrc

本地文件

在本地运行我们的文档需要使用Jekyll,Jekyll是一种相当灵活的静态站点生成器,它为我们提供:基本包含,基于Markdown的文件,模板等。 这是开始的方法:

  1. Run through the tooling setup above to install Jekyll (the site builder) and other Ruby dependencies with bundle install.
  2. From the root /bootstrap directory, run npm run docs-serve in the command line.
  3. Open http://localhost:9001 in your browser, and voilà.

阅读其文档documentation,以了解有关使用Jekyll的更多信息。

故障排除

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