1.6、Bootstrap V4自学之路------起步---生成工具

生成工具

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

工具安装

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

1. 下载并安装 Node，我们用它来管理我们的依赖关系。

2. 安装 Grunt 命令行工具，grunt-cli，通过 npm install -g grunt-cli。

3. 导航到 /bootstrap 根目录，然后运行 npm install 来安装我们列在package.json 中的本地的相依性。

4. 安装 Ruby，通过 gem install bundler 安装 Bundler，最后运行bundle。这样就安装了所有的 Ruby 依赖关系，比如 Jekyll 和 Sass linter。

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

使用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 文件，并且在你保存的时候自动编译他们。

切换Sass编译器

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

• libsass（默认），通过 grunt-sass 使用 libsass。

• sass，通过 grunt-contrib-sass 使用 Ruby Sass。

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

本地文件

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

1. 利用上面提到的 tooling setup来安装 Jekyll（站点生成器）和 Rouge（实现语法高亮显示）
   Windows 用户：阅读这份非官方引导来启动和无障碍运行 Jekyll。

2. 从 /bootstrap 根目录运行，在命令行运行 jekyll serve。

3. 在你的浏览器和 voilà 中打开 http://localhost:9001/。

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

故障排除

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