布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

引导Git子模块工作流

我以前在项目中使用过Bootstrap,但是我总是下载预编译的Bootstrap文件。虽然这在过去很容易奏效,但也有一些缺点。

  • 在更新Bootstrap时,我必须记住下载预编译代码并更新本地Git存储库中的文件。如果我记得做的话,并不难。
  • 我没有得到使用无引导混合和变量的好处。
  • 我对引导代码所做的任何更改都保存在我自己的项目专用Git存储库中。

因此,现在是时候在Git存储库中将引导程序作为子模块添加了。首先我将fork Bootstrap,然后我将添加子模块并编译Bootstrap。

GitHub上的Fork bootstrap

我选择做的第一件事就是用叉子叉引导项目。这样做的目的是,如果我想对引导代码进行任何更改,我可以这样做,并将更改提交到我的分叉的副本(可选地发出一个pull请求)。

添加引导子模块

派生引导程序之后,下一步是将引导子模块添加到现有的Git存储库中。我将把子模块放在src/less/bootstrap文件夹中。

美元git子模块添加git@github.com:蓝色/ bootstrap.git src /不/引导

注意,您需要将上面一行中的SSH克隆URL替换为基于您的fork的URL。或者,如果您不希望派生引导库,那么输入引导项目的SSH克隆URL。

美元git子模块添加git@github.com:材质/ bootstrap.git src /不/引导

添加子模块后,将下载用于引导的完整源代码(在旧版本的Git中不是这样的)。

进口bootstrap.less

最后一步是导入基本引导程序。更少的文件。我有一个基本的风格。我用更少的文件来导入所有的文件。我只需要在文件的顶部添加以下行:

@ import“引导/ / bootstrap.less少”;

现在我可以使用Bootstrap LESS变量和mixin,包括媒体查询变量。

建立引导

您还可以选择从源代码构建bootstrap.css文件。Bootstrap在构建过程中使用Grunt。因此,我们将首先安装Grunt,然后使用node包管理器安装包依赖关系,最后使用Grunt构建Bootstrap。

安装咕哝:

npm美元安装- g grunt-cli

安装的依赖关系:

美元cdsrc /不/引导美元npm安装

编译引导:

美元的呼噜声

阅读更多

然后可以修改grunt文件,从dist/目录中获取bootstrap.min.css文件。你可以阅读更多关于使用引导较少的变量和mixin。我还建议使用LESS Hat项目提供了大量有用的mixin这使得跨浏览器特性支持更加容易。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。