bootstrap使用手册
编译工具
Bootstrap是一个流行的开源前端框架,可以快速构建响应式、移动端友好的网站和Web应用程序。编译工具(如Webpack、Gulp等)可以帮助开发者自动化网站建设、网页设计和网站开发流程,包括压缩CSS和JavaScript文件、优化图像、自动重载浏览器等。在小程序开发中,可以使用类似的工具来打包、压缩和优化代码,以提高性能和用户体验。
有兴趣与 DEVDIY 开发者合作吗?
了解如何使用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和其它插件.
完成后,你就可以通过命令行来执行丰富的指令了。
使用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
网址,大功造成!
加入 DEVDIY 开发者社区
利用 DEVDIY 资源快速拓展您的业务有兴趣与 DEVDIY 开发者合作吗?