编译工具
了解如何使用Bootstrap包含的npm(nodejs)命令来编译(构建、调试与生成)最终文档、源代码、执行测试等。
编译前环境部署
Bootstrap 使用 NPM脚本 来构建整个系统,其中系统的package.json 中明定义了使用框架的方便的方法,包括编译代码,运行测试等.
要使用我们的构建系统(进行编译)并在本地运行我们的文档,首先需要一个Bootstrap的源文件和Nodejs安装程序副本。如果你应该已经准备好开始动手,让我们一起参照下面的步骤启动来实施:
- 下载并安装Node.js, 我们用它来管理我们的依赖关系。
- 执行Nodejs命令并导航到
/bootstrap
的根目录,然后运行npm install
命令来安装 package.json中所定义的本地相依赖项目。 - 安装 Ruby, 通过运行
gem install bundler
命令来安装 Bundler,完成后运行bundle install
,这样就安装了所有的 Ruby 依赖关系,比如 Jekyll和其它插件.- Windows操作系统用户: 运行Jekyll时可参照阅读本指南 并进行故障排查。
完成后,你就可以通过命令行来执行丰富的指令了。
- Windows操作系统用户: 运行Jekyll时可参照阅读本指南 并进行故障排查。
使用NPM(nodejs)脚本
我们的 package.json 包括了下面的命令和任务:
事务 | 描述 |
---|---|
npm run dist | npm run dist 创建 /dist 目录及其下面的文件, 调用Sass、Autoprefixer和UglifyJS进程。 |
npm test | 与 npm run dist 相同,在本地进行测试。 |
npm run docs | 编译生成本地CSS、JavaScript文档,完成后你可以通过npm run docs-serve 命令在本地运行生成的文档。 |
运行 npm run
可以查看所有 npm脚本命令。
Autoprefixer 浏览器前缀定义程式
Bootstrap 使用Autoprefixer 在编译时(及编译过程中)自动将浏览器厂商的个性前缀(如ms-、webkit-)添加到某些CSS属性上,这可以节省开发者编写BootStrap的时间和代码,允许我们单独编写CSS的关键部分,同时消除对v3中发现的供应商混合问题带来的隐患。
我们通过Autoprefixer在我们的GitHub存储库中的单独文件中维护支持的浏览器列表。有关详细信息,请参阅 /package.json 清单。
本地文档
本地文档我们是采用Jekyll工具来编译的(Jekyll是一个将纯文本转化为静态网站和博客的工具,通过Nodejs命令行运行), 这是一个非常灵活的静态站点生成器,它为我们提供:文件结构、基于Markdown的文件、模板等。以下是如其部署方法:
- 运行前一段的 编译前环境部署 安装Jekyll(站点构建器)和其他Ruby依赖项,命令:
bundle install
。 - 在
/bootstrap
根目录,运行nnpm run docs-serve
命令行。 - 在浏览器打开
http://localhost:9001
网址,大功造成!
更多教程请移步Jekyll官网文档中心。
故障排除
如果你在安装依赖关系或者运行 Grunt 命令时遇到了麻烦,请卸载所有之前的依赖关系版本(服务器中的和本地的),然后运行 npm install
从头再来。