生成工具

优质

小牛编辑

144浏览

2023-12-01

Bootstrap 在 CSS 方面采用 Grunt，用 JavaScript 构建系统，用 Jekyll 做记录。Gruntfile 在使用框架方面有许多便利的特点，包括编译代码、运行测试等等。

工具安装

为了使用Gruntfile以及本地运行我们的文档，你需要拷贝一份Bootstrap的源文件，还有Node.js以及Grunt。参照下面的步骤，你应该已经准备好开始动手了：

下载并安装 Node，我们用它来管理我们的依赖关系。
安装 Grunt 命令行工具，grunt-cli，通过 npm install -g grunt-cli。
导航到 /bootstrap 根目录，然后运行 npm install 来安装我们列在package.json 中的本地的相依性。
安装 Ruby，通过 gem install bundler 安装 Bundler，最后运行bundle。这样就安装了所有的 Ruby 依赖关系，比如 Jekyll 和 Sass linter。

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

我们的Gruntfile包括了下面的命令和任务：

事务	描述
`grunt`	运行 `grun` 在本地运行测试并且将 CSS 和 JavaScript 编译进 `/dist`。使用 Sass 和UglifyJS。
`grunt dist`	`grunt dist` 产生 `/dist` 路径和编译文件。使用Sass 和 UglifyJS。
`grunt test`	在 PhantomJS 中运行 scss-lint、ESLint 和 QUnit测试（用于 CI）。
`grunt docs`	通过 `jekyll serve` 运行本地文件的资源，创建并测试 CSS、JavaScript 和其他。
`grunt watch`	这是一个非常方便的方法，能够监视 Sass 文件，并且在你保存的时候自动编译他们。

Bootstrap 默认用 libsass 编译，但是你可以选择传统的 Ruby Sass，通过设置 TWBS_SASS 环境变量。下面两个选择都支持：

比如，运行TWBS_SASS=sass grunt进行测试，用Ruby Sass搭建 Bootstrap。

在本地运行我们的文档需要用到Jekyll，Jekyll是一个灵活的静态网站生成器，提供了基本的包含、基于Markdown-based的文件、模板等等。下面介绍了如何开动它：

利用上面提到的 tooling setup来安装 Jekyll（站点生成器）和 Rouge（实现语法高亮显示）
Windows 用户：阅读这份非官方引导来启动和无障碍运行 Jekyll。
从 /bootstrap 根目录运行，在命令行运行 jekyll serve。
在你的浏览器和 voilà 中打开 http://localhost:9001/。

阅读这份文档以了解更多有关使用Jekyll的信息。

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