编译工具
Bootstrap是一个流行的开源前端框架,可以快速构建响应式、移动端友好的网站和Web应用程序。编译工具(如Webpack、Gulp等)可以帮助开发者自动化网站建设、网页设计和网站开发流程,包括压缩CSS和JavaScript文件、优化图像、自动重载浏览器等。在小程序开发中,可以使用类似的工具来打包、压缩和优化代码,以提高性能和用户体验。

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

编译前环境部署

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和其它插件.

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

使用NPM(nodejs)脚本

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

事务 描述
npm run dist npm run dist 创建 /dist 目录及其下面的文件, 调用SassAutoprefixerUglifyJS进程。
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的文件、模板等。以下是如其部署方法:

  1. 运行前一段的 编译前环境部署 安装Jekyll(站点构建器)和其他Ruby依赖项,命令: bundle install
  2. /bootstrap 根目录,运行n npm run docs-serve 命令行。
  3. 在浏览器打开 http://localhost:9001 网址,大功造成!

加入 DEVDIY 开发者社区

利用 DEVDIY 资源快速拓展您的业务
有兴趣与 DEVDIY 开发者合作吗?