构建工具
了解如何使用 Bootstrap 包含的 npm 脚本来构建我们的文档、编译源代码、运行测试等。
工具设置
Bootstrap为其构建系统使用npm 脚本。我们的package.json包含使用框架的便捷方法,包括编译代码、运行测试等。
要使用我们的构建系统并在本地运行我们的文档,您需要一份 Bootstrap 源文件和 Node.js 的副本。按照这些步骤,你应该准备好摇滚:
- 下载并安装 Node.js,我们用它来管理我们的依赖项。
- 下载 Bootstrap 的源代码或fork Bootstrap 的存储库。
- 导航到根
/bootstrap
目录并运行以安装我们在package.jsonnpm install
中列出的本地依赖项。
完成后,您将能够运行命令行提供的各种命令。
使用 npm 脚本
我们的package.json包含以下命令和任务:
任务 | 描述 |
---|---|
npm run dist |
npm run dist 创建/dist/ 包含编译文件的目录。使用Sass、Autoprefixer和terser。 |
npm test |
运行后在本地运行测试npm run dist |
npm run docs-serve |
在本地构建和运行文档。 |
运行npm run
以查看所有 npm 脚本。
萨斯
Bootstrap v4 使用Node Sass将我们的 Sass 源文件编译成 CSS 文件(包含在我们的构建过程中)。为了在使用您自己的资产管道编译 Sass 时生成相同的 CSS,您需要使用至少支持 Node Sass 所具有的功能的 Sass 编译器。这一点很重要,因为自 2020 年 10 月 26 日起,LibSass 和基于它构建的软件包(包括 Node Sass)已被弃用。
如果您需要更新的 Sass 功能或与更新的 CSS 标准的兼容性,Dart Sass现在是 Sass 的主要实现,并支持与 Node Sass 完全兼容的 JavaScript API(Dart Sass 的GitHub 页面上列出了一些例外情况)。
我们将 Sass 舍入精度提高到 6(默认情况下,在 Node Sass 中为 5),以防止浏览器舍入问题。如果您使用 Dart Sass,则不需要进行调整,因为该编译器使用 10 的舍入精度,并且出于效率原因不允许对其进行调整。
自动前缀
Bootstrap 使用Autoprefixer(包含在我们的构建过程中)在构建时自动将供应商前缀添加到某些 CSS 属性。这样做可以让我们一次性编写 CSS 的关键部分,同时消除对 v3 中的供应商 mixin 的需求,从而节省了我们的时间和代码。
我们在 GitHub 存储库中的单独文件中维护通过 Autoprefixer 支持的浏览器列表。有关详细信息,请参阅.browserslistrc。
本地文档
在本地运行我们的文档需要使用通过hugo-bin npm 包安装的Hugo。Hugo 是一个非常快速且可扩展的静态站点生成器,它为我们提供:基本包含、基于 Markdown 的文件、模板等。以下是如何开始:
- 运行上面的工具设置以安装所有依赖项。
- 从根
/bootstrap
目录,npm run docs-serve
在命令行中运行。 http://localhost:9001/
在浏览器中打开,瞧。
通过阅读其文档了解更多关于使用 Hugo 的信息。
故障排除
如果您在安装依赖项时遇到问题,请卸载所有以前的依赖项版本(全局和本地)。然后,重新运行npm install
。