编译工具

编译工具

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW

作者：莫桂欢

撰写时间：2022/1/28

编译工具

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

1.编译前环境部署

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时可参照阅读本指南 并进行故障排查。

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

2.使用NPM(nodejs)脚本

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

 

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

3.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从头再来