git图解（3）：分支操作7 months ago绿色分支表示其为当前分支，所以得切换至master分支git checkout master
// 创建并切换到新分支相当于：git branch xxx, git checkout xxx
git checkout -b newBranchName
"git checkout master"
切换到本地master分支; "git pull"
更新本地master分支代码至最新（如 本地master分支未关联远程master分支，“git pull origin master”）; "git checkout -b newBranchName" 基于本地master分支代码创建新分支：newBranchName,并切换到该分支;基于远程master分支创建分支（命令窗口进入工程根目录）：首先查看本地、线上分支信息（调用以下指令前建议先执行"git pull -p"防止本地git分支信息缓存）：git branch -a
白色显示为本地分支、绿色显示为当前分支、红色显示为远程分支；白色显示为本地分支、绿色显示为当前分支、红色显示为远程分支；切换至远程分支：git checkout remotes/origin/master
基于远程master分支创建新分支：基于远程master分支创建新分支：git checkout -b newBranchName
1.2 创建远程分支：创建远程分支可以直接由本地新分支推送完成也可以在远程分支管理系统（例如：github 、gitLab）上可视化操作完成；本地新分支推送创建远程分支在 1.1 部分我们在本地创建了一新分支， 如果在该分支更新了代码， 然后执行"git add "、"git
commit"指令后， 再执行以下指令可在远程创建新分支；git push origin newBranch:newBranch
git push &远程主机名& &本地分支名&:&远程分支名&GitHub上创建远程分支选中项目， 然后在项目首页左上侧点选分支按钮， 弹出的弹层输入新分支名称即可；PS: 上述创建的同名本地分支跟远程分支并没建立关联， 这样操作指令会比较不方便（如“git pull”指令得输入对应的远程分支名）， 怎么让其建立关联？ 切换到newBranchName分支(如当前处在其他分支):git checkout newBranchName
执行更新代码指令：git pull
就能看到git
的关联提示： 按照其提示提示执行指令即可：git branch --set-upstream-to=origin/newBranchName
git branch --set-upstream-to=origin/&远程分支名&
&本地分支名&如设置当前分支，第二个参数可省略,；校验是否关联成功：git pull
提示 “Already up-to-date.” 表示已关联成功；2.GIT切换分支；2.1工作区没新代码切换分支：创建好新分支后就可以在新分支进行开发， 但可能中途需要去维护其他分支代码；这个时候就得切换分支了，切换分支指令：git checkout newBranch2
ps: 编辑代码不会直接在develop、master分支操作，因为最终代码要同时合并到这两个分支上，所以一般均在新分支开发（即使是很小的改动）；2.2工作区有新代码切换分支：工作区间的代码均已提交到本地仓库（当前分支）， 那切换分支没什么问题， 但如果工作区域代码尚未提交，这时切换分支会怎样呢？有时候无法切换， 有时候能正常切换；能正常切换：改动的代码能正常合并到切换后的分支（自动合并成功）无法切换：改动的代码不能正常合并到切换后的分支（自动合并失败）工作区间有未提交代码，切换分支自动执行"git merge"操作，故有冲突将无法切换成功；当然也会有这样的场景： 当前分支代码没写完，还不想提交且因为有紧急需求不得不切换分支；这个时候可以 使用“”将代码暂时放着：// 如 直接 "git stash"则将上次commit注释作为说明
git stash save "存储说明"
git checkout B
处理完紧急需求拿出继续开发：git checkout A
git stash pop
如果本来想在A分支上开发， 开发过程中才发现当前处在B分支，想强制将工作区间代码迁到A分支也可以借助“工作现场”完成：git stash save "存储说明"
git checkout B
git stash pop
// 如有冲突且处理完所有冲突
git add -A
2.3切换分支异常处理（windows下）不少在windows下使用git的同学会碰到这样的问题： 从A分支切换到B分支由于git异常导致虽然切换分支成功，但在当前B分支上留存了大量A分支的代码（被git认为是新的改动或新增文件）；这个时候就得用到上一篇博文（）知识了!我们可以将所有改动提交， 然后使用远程分支代码覆盖！放心提交到本地仓库，反正后面这个commit会被覆盖。// 将所有改动提交到本地仓库
git add -A
git commit -m "这个commit会被覆盖"
//B 是当前分支名
git reset --hard origin/B
惯例放图：3.GIT合并分支；3.1正常合并分支代码分支代码合并也有两方式：
合并本地分支代码、合并远程分支代码；合并本地分支代码:
例如在新分支 newBranch开发的功能已完成并已提交；接下来走测试流程需要将代码合并到develop分支（我所在团队develop为测试分支，不同团队的测试分支会不一样）。// 切换到develop分支
git checkout develop
// 合并newBranch代码
git merge newBranch
// 提交commit到远程（newBranch分支有多少个commit就会生成几个）
合并远程分支代码:
如果新分支由多人维护，为保证更新代码为最新，使用上述方式合并分支会比较麻烦：首先得切换到本地newBranch分支(git checkout newBranch)；然后更新代码(git pull)；再次切换回develop分支(git checkout develop)；最后才能执行合并操作(git merge newBranch); 其实可直接将远程的 newBranch分支代码合并到本地 develop分支：git pull origin newBranch
3.2合并代码冲突解决无论哪种方式合并分支代码代码冲突是无可避免的情况， 开发流程使用了typescript/sass等需要执行编译的语言更容易产生冲突；分支合并代码冲突跟一般代码冲突一样： git能处理的冲突会自动解决， 否则就得手动解决冲突；冲突是由于多人维护代码导致，一定要找到相关人一起讨论冲突代码的取舍；如果待合并分支代码跟当前分支前几次commit修改了同一文件，合并分支就会出现以下提示：以上提示git自动合并失败，需要手动解决冲突， 打开冲突文件会发现以下：以上提示git自动合并失败，需要手动解决冲突， 打开冲突文件会发现以下："HEAD"到"======="之间为当前分支改动， "======="到"&&&&&&& newBranch"为待合并分支的改动；"HEAD"到"======="之间为当前分支改动， "======="到"&&&&&&& newBranch"为待合并分支的改动；手动解决冲突后：告诉git冲突已解决：告诉git冲突已解决：git add -A
合并完成，提交代码：git commit -m "[master]-合并newBranch代码"
3.3合并代码异常处理同切换分支异常情况， 在windows下合并分支也会出现异常， 异常处理方式同上：// 将所有改动提交到本地仓库
git add -A
git commit -m "这个commit会被覆盖"
//B 是当前分支名
git reset --hard origin/B
3.4合并代码减少commit次数（简洁合并）在合并分支后使用可视化工具查看代码提交记录(或者 "git log" 指令)， 有代码洁癖的同学可能接受不了。如果 newBranch分支开发过程中有10个commit， 那合并完成后（没产生冲突）也会产生10个commit；如何让合并代码后commit更简洁？使用"git rebase"合并分支代码（实际开发中会发现"git rebase"执行起来非常麻烦）： rebase，合并的结果好看：清晰、直观，但合并过程中出现冲突处理比较麻烦（rebase过程中，一个commit出现冲突，下一个commit也极有可能出现冲突，一次rebase可能要解决多次冲突）；merge，合并结果不好看：一堆线交错，但合并有冲突的话，只要解决一次就行了；所以建议先"git rebase xxx"，如有冲突，"git rebase --abort"，再换用"git merge xxx"。另一方案： 可以合并完成后（"git push"之前）编辑commit 信息， 将多个commit合并成一个：例如： 我再当前newBranch分支提交了三个commit :执行"git rebase -i"进入交互模式，自动打开vim:执行"git rebase -i"进入交互模式，自动打开vim:将后两个“pick”改成（vim模式输入“i”进入编辑状态）“s”, 然后保存退出(esc退出编辑状态，然后":"输入“wq”保存退出):将后两个“pick”改成（vim模式输入“i”进入编辑状态）“s”, 然后保存退出(esc退出编辑状态，然后":"输入“wq”保存退出):保存成功后还有一个编辑vim,
合并commit后，新的commit注释填写下，保存退出：保存成功后还有一个编辑vim,
合并commit后，新的commit注释填写下，保存退出：合并完成：合并完成：ps： 简洁合并付出的就是多余的操作， 实际开发讲求的是效率， 所以很多人懒得弄这些（例如我）；4.GIT删除分支；git的分支在完成它使命后就没必要存在了：上线流程完成：应删除本地分支及远程分支(git lab分支)： git branch -D xxxx， 上线完成意味着当前xxx分支代码已经合并到线上分支（master）以及开发分支(develop)， 该分支后续功能的改动（bug修复或代码扩展）完全可以在master新开分支完成；（否则可能遗忘删除，导致远程分支原来越多） ----4.1删除本地分支// "-d" 如果该分支代码未合并到其他分支，将无法删除；
// "-D" 强制删除分支，不会出现任何提示；
git branch -D xxxx
4.2删除远程分支删除远程分支两种方式：1.在git管理系统的Web页面操作（gitLab）；gitHub上无法删除远程分支， 如果你团队使用的是gitLab那可以在gitLab管理页面操作； 2.本地指令完成；git push origin --delete newBranch
参考资料：相关文章：赞赏还没有人赞赏，快来当第一个赞赏的人吧！3收藏分享举报文章被以下专栏收录分享前端浅显知识推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&分享前端浅显知识&,&permission&:&COLUMN_PUBLIC&,&memberId&:1353878,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&分享前端浅显知识&,&urlToken&:&wteamxq&,&id&:6857,&imagePath&:&dc18acbc2c73d.jpg&,&slug&:&wteamxq&,&applyReason&:&&,&name&:&浅谈前端&,&title&:&浅谈前端&,&url&:&https:\u002F\\u002Fwteamxq&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:541,&avatar&:{&id&:&dc18acbc2c73d&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fdc18acbc2c73d_l.jpg&,&articlesCount&:13},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-a83e7ed7ef3df_r.jpg&,&lastUpdated&:,&imagePath&:&v2-a83e7ed7ef3df.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[0257],&summary&:&git 的分支是它最明显的特性， 大部分人听别人推荐使用git都会听到“git分支操作方便...”，对比其他版本控制系统git 分支操作有难以置信的轻量，创建新分支几乎瞬间完成，不同分支之间切换也非常快捷方便；本文将结合实践以及绘图归纳、总结git常见的分支…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T16:50:25+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2356957,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&git图解（3）：分支操作&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:6857,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-a83e7ed7ef3df_r.jpg&,&author&:{&bio&:&web前端开发&,&isFollowing&:false,&hash&:&e5874263cac253d2b2fed8f&,&uid&:12,&isOrg&:false,&slug&:&xiao-qiang-85&,&isFollowed&:false,&description&:&每天进步一些些&,&name&:&萧强&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxiao-qiang-85&,&avatar&:{&id&:&db41a3918&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:1353878,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:615575}],&title&:&git图解（3）：分支操作&,&author&:&xiao-qiang-85&,&content&:&git 的分支是它最明显的特性， 大部分人听别人推荐使用git都会听到“git分支操作方便...”，对比其他版本控制系统git 分支操作有难以置信的轻量，创建新分支几乎瞬间完成，不同分支之间切换也非常快捷方便；本文将结合实践以及绘图归纳、总结git常见的分支操作指令以及注意事项；本文只总结git分支的实践运用， git分支底层实现原理请阅读\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fbook\u002Fbingohuang\u002Fprogit2\u002Fdetails\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EProGit第二版\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E分支部分章节；\u003Ch2\u003E1.GIT创建分支；\u003C\u002Fh2\u003E\u003Cp\u003E首先我们得知道， GIT分支包括本地分支
跟 远程分支； 惯例先上图：\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-be62a3afcedd83cc1c129ab83d9015a4_b.png\& data-rawwidth=\&1172\& data-rawheight=\&1026\& class=\&origin_image zh-lightbox-thumb\& width=\&1172\& data-original=\&https:\u002F\\u002Fv2-be62a3afcedd83cc1c129ab83d9015a4_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1172'%20height='1026'&&\u002Fsvg&\& data-rawwidth=\&1172\& data-rawheight=\&1026\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1172\& data-original=\&https:\u002F\\u002Fv2-be62a3afcedd83cc1c129ab83d9015a4_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-be62a3afcedd83cc1c129ab83d9015a4_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003E有时远程有的分支我们本地没有（其他同事维护的分支）， 或者本地有的分支远程没有（修复线上小问题开的本地小分支）；以下具体说下如何创建本地分支和远程分支：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E1.1 创建本地分支：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E新分支都是基于原有分支创建， 而在实践开发中基本从线上分支（与线上代码同步的分支）： master 分支创建。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-bc92b1ef3bb641d682103_b.png\& data-rawwidth=\&944\& data-rawheight=\&358\& class=\&origin_image zh-lightbox-thumb\& width=\&944\& data-original=\&https:\u002F\\u002Fv2-bc92b1ef3bb641d682103_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='944'%20height='358'&&\u002Fsvg&\& data-rawwidth=\&944\& data-rawheight=\&358\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&944\& data-original=\&https:\u002F\\u002Fv2-bc92b1ef3bb641d682103_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-bc92b1ef3bb641d682103_b.png\&\u003E\u003Cp\u003E而 从master创建本地分支也有两种方式：基于本地master分支创建分支、基于线上master分支创建分支；\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E基于本地master分支创建分支（命令窗口进入工程根目录）：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E查看当前是否在master分支：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 查看本地分支信息\ngit branch\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-84cdc3c4fd223abbf8eceefc_b.png\& data-rawwidth=\&880\& data-rawheight=\&146\& class=\&origin_image zh-lightbox-thumb\& width=\&880\& data-original=\&https:\u002F\\u002Fv2-84cdc3c4fd223abbf8eceefc_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='880'%20height='146'&&\u002Fsvg&\& data-rawwidth=\&880\& data-rawheight=\&146\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&880\& data-original=\&https:\u002F\\u002Fv2-84cdc3c4fd223abbf8eceefc_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-84cdc3c4fd223abbf8eceefc_b.png\&\u003E\u003Cp\u003E绿色分支表示其为当前分支，所以得切换至master分支\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit checkout master\ngit pull\n\u002F\u002F 创建并切换到新分支相当于：git branch xxx, git checkout xxx\ngit checkout -b newBranchName\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\&git checkout master\&
切换到本地master分支;\u003C\u002Fp\u003E\u003Cp\u003E \&git pull\&
更新本地master分支代码至最新（如 本地master分支未关联远程master分支，“git pull origin master”）;\u003C\u002Fp\u003E\u003Cp\u003E \&git checkout -b newBranchName\& 基于本地master分支代码创建新分支：newBranchName,并切换到该分支;\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-6ca2ee6f2_b.png\& data-rawwidth=\&884\& data-rawheight=\&410\& class=\&origin_image zh-lightbox-thumb\& width=\&884\& data-original=\&https:\u002F\\u002Fv2-6ca2ee6f2_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='884'%20height='410'&&\u002Fsvg&\& data-rawwidth=\&884\& data-rawheight=\&410\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&884\& data-original=\&https:\u002F\\u002Fv2-6ca2ee6f2_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-6ca2ee6f2_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E基于远程master分支创建分支（命令窗口进入工程根目录）：\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E首先查看本地、线上分支信息（调用以下指令前建议先执行\&git pull -p\&防止本地git分支信息缓存）：\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit branch -a\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-c26d86daaaacac_b.png\& data-rawwidth=\&1052\& data-rawheight=\&850\& class=\&origin_image zh-lightbox-thumb\& width=\&1052\& data-original=\&https:\u002F\\u002Fv2-c26d86daaaacac_r.png\&\u003E白色显示为本地分支、绿色显示为当前分支、红色显示为远程分支；\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1052'%20height='850'&&\u002Fsvg&\& data-rawwidth=\&1052\& data-rawheight=\&850\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1052\& data-original=\&https:\u002F\\u002Fv2-c26d86daaaacac_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-c26d86daaaacac_b.png\&\u003E白色显示为本地分支、绿色显示为当前分支、红色显示为远程分支；\u003C\u002Fp\u003E\u003Cp\u003E切换至远程分支：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit checkout remotes\u002Forigin\u002Fmaster\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-bfddd42b37_b.png\& data-rawwidth=\&1358\& data-rawheight=\&478\& class=\&origin_image zh-lightbox-thumb\& width=\&1358\& data-original=\&https:\u002F\\u002Fv2-bfddd42b37_r.png\&\u003E基于远程master分支创建新分支：\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1358'%20height='478'&&\u002Fsvg&\& data-rawwidth=\&1358\& data-rawheight=\&478\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1358\& data-original=\&https:\u002F\\u002Fv2-bfddd42b37_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-bfddd42b37_b.png\&\u003E基于远程master分支创建新分支：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit checkout -b newBranchName\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-b9c6fb7ba7f16bd6058c_b.png\& data-rawwidth=\&808\& data-rawheight=\&440\& class=\&origin_image zh-lightbox-thumb\& width=\&808\& data-original=\&https:\u002F\\u002Fv2-b9c6fb7ba7f16bd6058c_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='808'%20height='440'&&\u002Fsvg&\& data-rawwidth=\&808\& data-rawheight=\&440\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&808\& data-original=\&https:\u002F\\u002Fv2-b9c6fb7ba7f16bd6058c_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-b9c6fb7ba7f16bd6058c_b.png\&\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E1.2 创建远程分支：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E创建远程分支可以直接由本地新分支推送完成也可以在远程分支管理系统（例如：github 、gitLab）上可视化操作完成；\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E本地新分支推送创建远程分支\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E在 1.1 部分我们在本地创建了一新分支， 如果在该分支更新了代码， 然后执行\&git add \&、\&git
commit\&指令后， 再执行以下指令可在远程创建新分支；\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit push origin newBranch:newBranch\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Egit push &远程主机名& &本地分支名&:&远程分支名&\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-442ff4deb2ed33ff02c6_b.png\& data-rawwidth=\&850\& data-rawheight=\&420\& class=\&origin_image zh-lightbox-thumb\& width=\&850\& data-original=\&https:\u002F\\u002Fv2-442ff4deb2ed33ff02c6_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='850'%20height='420'&&\u002Fsvg&\& data-rawwidth=\&850\& data-rawheight=\&420\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&850\& data-original=\&https:\u002F\\u002Fv2-442ff4deb2ed33ff02c6_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-442ff4deb2ed33ff02c6_b.png\&\u003E\u003Cb\u003EGitHub上创建远程分支\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E选中项目， 然后在项目首页左上侧点选分支按钮， 弹出的弹层输入新分支名称即可；\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-cba44b3bb42c_b.png\& data-rawwidth=\&908\& data-rawheight=\&522\& class=\&origin_image zh-lightbox-thumb\& width=\&908\& data-original=\&https:\u002F\\u002Fv2-cba44b3bb42c_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='908'%20height='522'&&\u002Fsvg&\& data-rawwidth=\&908\& data-rawheight=\&522\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&908\& data-original=\&https:\u002F\\u002Fv2-cba44b3bb42c_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-cba44b3bb42c_b.png\&\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-bc71d2b98db1f87eeb03b0bc04da449b_b.png\& data-rawwidth=\&876\& data-rawheight=\&426\& class=\&origin_image zh-lightbox-thumb\& width=\&876\& data-original=\&https:\u002F\\u002Fv2-bc71d2b98db1f87eeb03b0bc04da449b_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='876'%20height='426'&&\u002Fsvg&\& data-rawwidth=\&876\& data-rawheight=\&426\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&876\& data-original=\&https:\u002F\\u002Fv2-bc71d2b98db1f87eeb03b0bc04da449b_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-bc71d2b98db1f87eeb03b0bc04da449b_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003EPS: 上述创建的同名本地分支跟远程分支并没建立关联， 这样操作指令会比较不方便（如“git pull”指令得输入对应的远程分支名）， 怎么让其建立关联？ \u003C\u002Fp\u003E\u003Cp\u003E切换到newBranchName分支(如当前处在其他分支):\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit checkout newBranchName\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E执行更新代码指令：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit pull\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E就能看到git
的关联提示：\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-4d176a3e20e3dc41e646e3b10a319816_b.png\& data-rawwidth=\&1110\& data-rawheight=\&358\& class=\&origin_image zh-lightbox-thumb\& width=\&1110\& data-original=\&https:\u002F\\u002Fv2-4d176a3e20e3dc41e646e3b10a319816_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1110'%20height='358'&&\u002Fsvg&\& data-rawwidth=\&1110\& data-rawheight=\&358\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1110\& data-original=\&https:\u002F\\u002Fv2-4d176a3e20e3dc41e646e3b10a319816_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-4d176a3e20e3dc41e646e3b10a319816_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003E 按照其提示提示执行指令即可：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit branch --set-upstream-to=origin\u002FnewBranchName \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Egit branch --set-upstream-to=origin\u002F&远程分支名&
&本地分支名&如设置当前分支，第二个参数可省略,；\u003C\u002Fp\u003E\u003Cp\u003E校验是否关联成功：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit pull\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E提示 “Already up-to-date.” 表示已关联成功；\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E2.GIT切换分支；\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E2.1工作区没新代码切换分支：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E创建好新分支后就可以在新分支进行开发， 但可能中途需要去维护其他分支代码；这个时候就得切换分支了，切换分支指令：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit checkout newBranch2\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Eps: 编辑代码不会直接在develop、master分支操作，因为最终代码要同时合并到这两个分支上，所以一般均在新分支开发（即使是很小的改动）；\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E2.2工作区有新代码切换分支：\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E工作区间的代码均已提交到本地仓库（当前分支）， 那切换分支没什么问题， 但如果工作区域代码尚未提交，这时切换分支会怎样呢？\u003C\u002Fp\u003E\u003Cp\u003E有时候无法切换， 有时候能正常切换；\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E能正常切换：改动的代码能正常合并到切换后的分支（自动合并成功）\u003C\u002Fp\u003E\u003Cp\u003E无法切换：改动的代码不能正常合并到切换后的分支（自动合并失败）\u003C\u002Fp\u003E\u003Cp\u003E工作区间有未提交代码，切换分支自动执行\&git merge\&操作，故有冲突将无法切换成功；\u003C\u002Fp\u003E\u003Cp\u003E当然也会有这样的场景： 当前分支代码没写完，还不想提交且因为有紧急需求不得不切换分支；这个时候可以 使用“\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fwteamxq\u002Fgit_rank\u002F276490\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E工作现场\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E”将代码暂时放着：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 如 直接 \&git stash\&则将上次commit注释作为说明\ngit stash save \&存储说明\&\ngit checkout B\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_b.png\& data-rawwidth=\&1380\& data-rawheight=\&454\& class=\&origin_image zh-lightbox-thumb\& width=\&1380\& data-original=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1380'%20height='454'&&\u002Fsvg&\& data-rawwidth=\&1380\& data-rawheight=\&454\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1380\& data-original=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_b.png\&\u003E\u003Cp\u003E处理完紧急需求拿出继续开发：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit checkout A\ngit stash pop\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-a8df1ed2bcb24a3a45e4c6_b.png\& data-rawwidth=\&1388\& data-rawheight=\&410\& class=\&origin_image zh-lightbox-thumb\& width=\&1388\& data-original=\&https:\u002F\\u002Fv2-a8df1ed2bcb24a3a45e4c6_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1388'%20height='410'&&\u002Fsvg&\& data-rawwidth=\&1388\& data-rawheight=\&410\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1388\& data-original=\&https:\u002F\\u002Fv2-a8df1ed2bcb24a3a45e4c6_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-a8df1ed2bcb24a3a45e4c6_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003E如果本来想在A分支上开发， 开发过程中才发现当前处在B分支，想强制将工作区间代码迁到A分支也可以借助“工作现场”完成：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit stash save \&存储说明\&\ngit checkout B\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_b.png\& data-rawwidth=\&1380\& data-rawheight=\&454\& class=\&origin_image zh-lightbox-thumb\& width=\&1380\& data-original=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1380'%20height='454'&&\u002Fsvg&\& data-rawwidth=\&1380\& data-rawheight=\&454\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1380\& data-original=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-cf69cc60ecb6f689b137da_b.png\&\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit stash pop\n\u002F\u002F 如有冲突且处理完所有冲突\ngit add -A\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-d68c5a987ecb_b.png\& data-rawwidth=\&1304\& data-rawheight=\&418\& class=\&origin_image zh-lightbox-thumb\& width=\&1304\& data-original=\&https:\u002F\\u002Fv2-d68c5a987ecb_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1304'%20height='418'&&\u002Fsvg&\& data-rawwidth=\&1304\& data-rawheight=\&418\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1304\& data-original=\&https:\u002F\\u002Fv2-d68c5a987ecb_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-d68c5a987ecb_b.png\&\u003E\u003Cp\u003E\u003Cb\u003E2.3切换分支异常处理（windows下）\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E不少在windows下使用git的同学会碰到这样的问题： 从A分支切换到B分支由于git异常导致虽然切换分支成功，但在当前B分支上留存了大量A分支的代码（被git认为是新的改动或新增文件）；\u003C\u002Fp\u003E\u003Cp\u003E这个时候就得用到上一篇博文（\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003Egit图解2：git 代码回退；\u003C\u002Fa\u003E）知识了!\u003C\u002Fp\u003E\u003Cp\u003E我们可以将所有改动提交， 然后使用远程分支代码覆盖！放心提交到本地仓库，反正后面这个commit会被覆盖。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 将所有改动提交到本地仓库\ngit add -A\ngit commit -m \&这个commit会被覆盖\&\n\u002F\u002FB 是当前分支名\ngit reset --hard origin\u002FB\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E惯例放图：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-e2bb432b61c4a411f31c2110050dafb0_b.png\& data-rawwidth=\&1002\& data-rawheight=\&736\& class=\&origin_image zh-lightbox-thumb\& width=\&1002\& data-original=\&https:\u002F\\u002Fv2-e2bb432b61c4a411f31c2110050dafb0_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1002'%20height='736'&&\u002Fsvg&\& data-rawwidth=\&1002\& data-rawheight=\&736\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1002\& data-original=\&https:\u002F\\u002Fv2-e2bb432b61c4a411f31c2110050dafb0_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-e2bb432b61c4a411f31c2110050dafb0_b.png\&\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ch2\u003E3.GIT合并分支；\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E3.1正常合并分支代码\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E分支代码合并也有两方式：
合并本地分支代码、合并远程分支代码；\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E合并本地分支代码: \u003C\u002Fb\u003E 例如在新分支 newBranch开发的功能已完成并已提交；接下来走测试流程需要将代码合并到develop分支（我所在团队develop为测试分支，不同团队的测试分支会不一样）。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 切换到develop分支\ngit checkout develop\n\u002F\u002F 合并newBranch代码\ngit merge newBranch\n\u002F\u002F 提交commit到远程（newBranch分支有多少个commit就会生成几个）\ngit push\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-971f83dc2d34cc0d0a1d1e982d09da35_b.png\& data-rawwidth=\&868\& data-rawheight=\&416\& class=\&origin_image zh-lightbox-thumb\& width=\&868\& data-original=\&https:\u002F\\u002Fv2-971f83dc2d34cc0d0a1d1e982d09da35_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='868'%20height='416'&&\u002Fsvg&\& data-rawwidth=\&868\& data-rawheight=\&416\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&868\& data-original=\&https:\u002F\\u002Fv2-971f83dc2d34cc0d0a1d1e982d09da35_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-971f83dc2d34cc0d0a1d1e982d09da35_b.png\&\u003E\u003Cp\u003E\u003Cb\u003E合并远程分支代码\u003C\u002Fb\u003E:
如果新分支由多人维护，为保证更新代码为最新，使用上述方式合并分支会比较麻烦：\u003C\u002Fp\u003E\u003Cp\u003E首先得切换到本地newBranch分支(git checkout newBranch)；\u003C\u002Fp\u003E\u003Cp\u003E然后更新代码(git pull)；\u003C\u002Fp\u003E\u003Cp\u003E再次切换回develop分支(git checkout develop)；\u003C\u002Fp\u003E\u003Cp\u003E最后才能执行合并操作(git merge newBranch); \u003C\u002Fp\u003E\u003Cp\u003E其实可直接将远程的 newBranch分支代码合并到本地 develop分支：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit pull origin newBranch\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-a5e715bc43ce5c9f20cb8f_b.png\& data-rawwidth=\&862\& data-rawheight=\&432\& class=\&origin_image zh-lightbox-thumb\& width=\&862\& data-original=\&https:\u002F\\u002Fv2-a5e715bc43ce5c9f20cb8f_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='862'%20height='432'&&\u002Fsvg&\& data-rawwidth=\&862\& data-rawheight=\&432\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&862\& data-original=\&https:\u002F\\u002Fv2-a5e715bc43ce5c9f20cb8f_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-a5e715bc43ce5c9f20cb8f_b.png\&\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E3.2合并代码冲突解决\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E无论哪种方式合并分支代码代码冲突是无可避免的情况， 开发流程使用了typescript\u002Fsass等需要执行编译的语言更容易产生冲突；\u003C\u002Fp\u003E\u003Cp\u003E分支合并代码冲突跟一般代码冲突一样： git能处理的冲突会自动解决， 否则就得手动解决冲突；冲突是由于多人维护代码导致，一定要找到相关人一起讨论冲突代码的取舍；\u003C\u002Fp\u003E\u003Cp\u003E如果待合并分支代码跟当前分支前几次commit修改了同一文件，合并分支就会出现以下提示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-450cef40b916d91ebf24dd9ab816154c_b.png\& data-rawwidth=\&962\& data-rawheight=\&140\& class=\&origin_image zh-lightbox-thumb\& width=\&962\& data-original=\&https:\u002F\\u002Fv2-450cef40b916d91ebf24dd9ab816154c_r.png\&\u003E以上提示git自动合并失败，需要手动解决冲突， 打开冲突文件会发现以下：\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='962'%20height='140'&&\u002Fsvg&\& data-rawwidth=\&962\& data-rawheight=\&140\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&962\& data-original=\&https:\u002F\\u002Fv2-450cef40b916d91ebf24dd9ab816154c_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-450cef40b916d91ebf24dd9ab816154c_b.png\&\u003E以上提示git自动合并失败，需要手动解决冲突， 打开冲突文件会发现以下：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-ef4b76ebecc686c_b.png\& data-rawwidth=\&674\& data-rawheight=\&236\& class=\&origin_image zh-lightbox-thumb\& width=\&674\& data-original=\&https:\u002F\\u002Fv2-ef4b76ebecc686c_r.png\&\u003E\&HEAD\&到\&=======\&之间为当前分支改动， \&=======\&到\&&&&&&&& newBranch\&为待合并分支的改动；\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='674'%20height='236'&&\u002Fsvg&\& data-rawwidth=\&674\& data-rawheight=\&236\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&674\& data-original=\&https:\u002F\\u002Fv2-ef4b76ebecc686c_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-ef4b76ebecc686c_b.png\&\u003E\&HEAD\&到\&=======\&之间为当前分支改动， \&=======\&到\&&&&&&&& newBranch\&为待合并分支的改动；\u003C\u002Fp\u003E\u003Cp\u003E手动解决冲突后：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-598a162ee5a6ca8babde9588_b.png\& data-rawwidth=\&692\& data-rawheight=\&94\& class=\&origin_image zh-lightbox-thumb\& width=\&692\& data-original=\&https:\u002F\\u002Fv2-598a162ee5a6ca8babde9588_r.png\&\u003E告诉git冲突已解决：\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='692'%20height='94'&&\u002Fsvg&\& data-rawwidth=\&692\& data-rawheight=\&94\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&692\& data-original=\&https:\u002F\\u002Fv2-598a162ee5a6ca8babde9588_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-598a162ee5a6ca8babde9588_b.png\&\u003E告诉git冲突已解决：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit add -A\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E合并完成，提交代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit commit -m \&[master]-合并newBranch代码\&\ngit push\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cb\u003E3.3合并代码异常处理\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E同切换分支异常情况， 在windows下合并分支也会出现异常， 异常处理方式同上：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 将所有改动提交到本地仓库\ngit add -A\ngit commit -m \&这个commit会被覆盖\&\n\u002F\u002FB 是当前分支名\ngit reset --hard origin\u002FB\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cb\u003E3.4合并代码减少commit次数（简洁合并）\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E在合并分支后使用可视化工具查看代码提交记录(或者 \&git log\& 指令)， 有代码洁癖的同学可能接受不了。如果 newBranch分支开发过程中有10个commit， 那合并完成后（没产生冲突）也会产生10个commit；如何让合并代码后commit更简洁？\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E使用\&git rebase\&合并分支代码\u003Cb\u003E（\u003C\u002Fb\u003E实际开发中会发现\&git rebase\&执行起来非常麻烦\u003Cb\u003E）：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E rebase，合并的结果好看：清晰、直观，但合并过程中出现冲突处理比较麻烦（rebase过程中，一个commit出现冲突，下一个commit也极有可能出现冲突，一次rebase可能要解决多次冲突）；\u003C\u002Fp\u003E\u003Cp\u003Emerge，合并结果不好看：一堆线交错，但合并有冲突的话，只要解决一次就行了；\u003C\u002Fp\u003E\u003Cp\u003E所以建议先\&git rebase xxx\&，如有冲突，\&git rebase --abort\&，再换用\&git merge xxx\&。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E另一方案： 可以合并完成后（\&git push\&之前）编辑commit 信息， 将多个commit合并成一个：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E例如： 我再当前newBranch分支提交了三个commit :\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-31c1b7b8da70e854acf64df09dedda60_b.png\& data-rawwidth=\&842\& data-rawheight=\&624\& class=\&origin_image zh-lightbox-thumb\& width=\&842\& data-original=\&https:\u002F\\u002Fv2-31c1b7b8da70e854acf64df09dedda60_r.png\&\u003E执行\&git rebase -i\&进入交互模式，自动打开vim:\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='842'%20height='624'&&\u002Fsvg&\& data-rawwidth=\&842\& data-rawheight=\&624\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&842\& data-original=\&https:\u002F\\u002Fv2-31c1b7b8da70e854acf64df09dedda60_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-31c1b7b8da70e854acf64df09dedda60_b.png\&\u003E执行\&git rebase -i\&进入交互模式，自动打开vim:\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-c478e314c9ac37eece49770_b.png\& data-rawwidth=\&1054\& data-rawheight=\&848\& class=\&origin_image zh-lightbox-thumb\& width=\&1054\& data-original=\&https:\u002F\\u002Fv2-c478e314c9ac37eece49770_r.png\&\u003E将后两个“pick”改成（vim模式输入“i”进入编辑状态）“s”, 然后保存退出(esc退出编辑状态，然后\&:\&输入“wq”保存退出):\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1054'%20height='848'&&\u002Fsvg&\& data-rawwidth=\&1054\& data-rawheight=\&848\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1054\& data-original=\&https:\u002F\\u002Fv2-c478e314c9ac37eece49770_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-c478e314c9ac37eece49770_b.png\&\u003E将后两个“pick”改成（vim模式输入“i”进入编辑状态）“s”, 然后保存退出(esc退出编辑状态，然后\&:\&输入“wq”保存退出):\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-9c2fb98ef161fc9a130febe3e8e798f4_b.png\& data-rawwidth=\&1028\& data-rawheight=\&856\& class=\&origin_image zh-lightbox-thumb\& width=\&1028\& data-original=\&https:\u002F\\u002Fv2-9c2fb98ef161fc9a130febe3e8e798f4_r.png\&\u003E保存成功后还有一个编辑vim,
合并commit后，新的commit注释填写下，保存退出：\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1028'%20height='856'&&\u002Fsvg&\& data-rawwidth=\&1028\& data-rawheight=\&856\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1028\& data-original=\&https:\u002F\\u002Fv2-9c2fb98ef161fc9a130febe3e8e798f4_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-9c2fb98ef161fc9a130febe3e8e798f4_b.png\&\u003E保存成功后还有一个编辑vim,
合并commit后，新的commit注释填写下，保存退出：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-52b52e3f2fcf929061de_b.png\& data-rawwidth=\&1214\& data-rawheight=\&674\& class=\&origin_image zh-lightbox-thumb\& width=\&1214\& data-original=\&https:\u002F\\u002Fv2-52b52e3f2fcf929061de_r.png\&\u003E合并完成：\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1214'%20height='674'&&\u002Fsvg&\& data-rawwidth=\&1214\& data-rawheight=\&674\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1214\& data-original=\&https:\u002F\\u002Fv2-52b52e3f2fcf929061de_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-52b52e3f2fcf929061de_b.png\&\u003E合并完成：\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-b82e8daca58be5e23ab9710_b.png\& data-rawwidth=\&914\& data-rawheight=\&850\& class=\&origin_image zh-lightbox-thumb\& width=\&914\& data-original=\&https:\u002F\\u002Fv2-b82e8daca58be5e23ab9710_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='914'%20height='850'&&\u002Fsvg&\& data-rawwidth=\&914\& data-rawheight=\&850\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&914\& data-original=\&https:\u002F\\u002Fv2-b82e8daca58be5e23ab9710_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-b82e8daca58be5e23ab9710_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E\u003Ci\u003Eps： 简洁合并付出的就是多余的操作， 实际开发讲求的是效率， 所以很多人懒得弄这些（例如我）；\u003C\u002Fi\u003E\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Ch2\u003E4.GIT删除分支；\u003C\u002Fh2\u003E\u003Cp\u003Egit的分支在完成它使命后就没必要存在了：\u003C\u002Fp\u003E\u003Cblockquote\u003E上线流程完成：应删除本地分支及远程分支(git lab分支)： git branch -D xxxx， 上线完成意味着当前xxx分支代码已经合并到线上分支（master）以及开发分支(develop)， 该分支后续功能的改动（bug修复或代码扩展）完全可以在master新开分支完成；（\u003Cstrong\u003E否则可能遗忘删除，导致远程分支原来越多\u003C\u002Fstrong\u003E） ----\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fwteamxq\u002Fgit_rank\u002F292402\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Egit_tips - [ git常用指令排行榜 ] - 看云\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cb\u003E4.1删除本地分支\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F \&-d\& 如果该分支代码未合并到其他分支，将无法删除；\n\u002F\u002F \&-D\& 强制删除分支，不会出现任何提示；\ngit branch -D xxxx\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cb\u003E4.2删除远程分支\u003C\u002Fb\u003E\u003Cbr\u003E删除远程分支两种方式：\u003C\u002Fp\u003E\u003Cp\u003E1.在git管理系统的Web页面操作（gitLab）；\u003C\u002Fp\u003E\u003Cp\u003EgitHub上无法删除远程分支， 如果你团队使用的是gitLab那可以在gitLab管理页面操作； \u003C\u002Fp\u003E\u003Cp\u003E2.本地指令完成；\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit push origin --delete newBranch\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E参考资料：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fdocs\u002Fgit-branch\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Egit branch官方API文档\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freorganize-git-local-commits\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E重新组织git本地提交 | \u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fwteamxq\u002Fgit_rank\u002F277620\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Egit常用指令排行榜\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E相关文章：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003Egit图解1：git区域总结；\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003Egit图解2：git 代码回退；\u003C\u002Fa\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T08:50:25.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:3,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-a83e7ed7ef3df_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Git&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&GitHub&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&GIT项目&}],&adminClosedComment&:false,&titleImageSize&:{&width&:600,&height&:252},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&wteamxq&,&name&:&浅谈前端&},&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:0,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T16:50:25+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:null,&isFollowing&:false,&hash&:&c87bc60a4eecd04a53a56&,&uid&:84,&isOrg&:false,&slug&:&yu-zhi-xing-79&,&isFollowed&:false,&description&:&&,&name&:&于智行&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyu-zhi-xing-79&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&08b5c03dbede&,&uid&:24,&isOrg&:false,&slug&:&huang-xiao-song-30&,&isFollowed&:false,&description&:&&,&name&:&黄晓松&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fhuang-xiao-song-30&,&avatar&:{&id&:&c&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&人生如棋，落子无悔&,&isFollowing&:false,&hash&:&045498abb215f10bc4f349c1e2ddcbad&,&uid&:56,&isOrg&:false,&slug&:&shalovely&,&isFollowed&:false,&description&:&移动前端 \u002Fnode.js爱好者\u002F结肠癌肺癌患者家属&,&name&:&oct.15th&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fshalovely&,&avatar&:{&id&:&v2-d91b16b2c6acf56a447abdac78bfb31a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&http:\u002F\\u002Fv2-be62a3afcedd83cc1c129ab83dx112.png\& data-rawwidth=\&1172\& data-rawheight=\&1026\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\\u002Fv2-be62a3afcedd83cc1c129ab83d9015a4_r.png\&\u003Egit 的分支是它最明显的特性， 大部分人听别人推荐使用git都会听到“git分支操作方便...”，对比其他版本控制系统git 分支操作有难以置信的轻量，创建新分支几乎瞬间完成，不同分支之间切换也非常快捷方便；本文将结合实践以及绘图归纳、总结git常见的分支…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-090db45c3f63f4d0208e1f_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&CSS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端性能优化&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&图标&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&web前端开发&,&isFollowing&:false,&hash&:&e5874263cac253d2b2fed8f&,&uid&:12,&isOrg&:false,&slug&:&xiao-qiang-85&,&isFollowed&:false,&description&:&每天进步一些些&,&name&:&萧强&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxiao-qiang-85&,&avatar&:{&id&:&db41a3918&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&content&:&网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式（其他方式欢迎补充）：\u003Cbr\u003E1.图标字体 显示；如\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小米官网\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E左侧菜单栏：\u003Cbr\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-0ca4b3c3bdd38ac953dc8b8c3ee5f409_b.png\& data-rawwidth=\&283\& data-rawheight=\&336\& class=\&content_image\& width=\&283\&\u003E2.CSS Sprite(CSS 精灵), 也称作 雪碧图；如\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fcn\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E华为官网\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E右侧提示栏：\u003Cbr\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fc71f0ecc73e_b.png\& data-rawwidth=\&154\& data-rawheight=\&304\& class=\&content_image\& width=\&154\&\u003E图标字体是个比较大的技术讨论点， 关于它可以出好几篇博文，可惜本文主角不是它， 今天主要探讨下 CSS Sprite -- \u003Cb\u003E雪碧图\u003C\u002Fb\u003E 的各种实现。\u003Cbr\u003E\u003Ch2\u003ECSS 雪碧图简介\u003C\u002Fh2\u003E开始说雪碧图各种实现前， 简单说下什么是雪碧图？雪碧图的原理是什么？\u003Cp\u003E\u003Cb\u003E什么是雪碧图？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003E雪碧图也叫CSS精灵， 是一CSS图像合成技术；\u003C\u002Fblockquote\u003E\u003Cp\u003E上面解释说它是一项技术，但我们开发人员往往将小图标 合并在一起之后的\u003Cb\u003E图片\u003C\u002Fb\u003E称作\u003Cb\u003E雪碧图\u003C\u002Fb\u003E；术语定义其实不用纠结， 我们知道它主要用在小图标显示上就行了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003ECSS 雪碧图应用原理：\u003C\u002Fb\u003E\u003Cbr\u003E只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？\u003C\u002Fp\u003E\u003Cp\u003E其实就是 \u003Cb\u003E截取\u003C\u002Fb\u003E 大图一部分显示，而这部分就是一个小图标，如下图：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-ae328b197ea_b.png\& data-rawwidth=\&694\& data-rawheight=\&332\& class=\&origin_image zh-lightbox-thumb\& width=\&694\& data-original=\&https:\u002F\\u002Fv2-ae328b197ea_r.png\&\u003E如显示上面 QQ 小图标， 则在合并图中X轴向右60像素， Y轴0像素， 截取宽高均为48像素；则 这个小图标就出来了：\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-55e7f191be89c0b048a64_b.png\& data-rawwidth=\&58\& data-rawheight=\&59\& class=\&content_image\& width=\&58\&\u003E\u003Cp\u003E关键样式： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-css\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebackground-image\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nt\&\u003Eurl\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&sprite.png\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&nt\&\u003Ebackground-position\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nt\&\u003E-60px\u003C\u002Fspan\u003E \u003Cspan class=\&nt\&\u003E0px\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&nt\&\u003Ewidth\u003C\u002Fspan\u003E\u003Cspan class=\&nd\&\u003E:48px\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&nt\&\u003Eheight\u003C\u002Fspan\u003E\u003Cspan class=\&nd\&\u003E:48px\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E;\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E接下来， 就开始进入实践环节， 如果我们要实现如下效果， 该怎么做呢？\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-5e45c7def29_b.png\& data-rawwidth=\&316\& data-rawheight=\&94\& class=\&content_image\& width=\&316\&\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-e3bcc3f7a1090147fdb1f_b.png\& data-rawwidth=\&319\& data-rawheight=\&92\& class=\&content_image\& width=\&319\&\u003E\u003Cp\u003E按正常开发流程， 我们的设计部同事会给我们这样的一个设计稿（实际设计稿会有更多无关图层）：\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-f38cedaca609_b.png\& data-rawwidth=\&918\& data-rawheight=\&362\& class=\&origin_image zh-lightbox-thumb\& width=\&918\& data-original=\&https:\u002F\\u002Fv2-f38cedaca609_r.png\&\u003E然后就是前端作为切图仔表现的时候了， 简单说下切图步骤（高级切图仔请跳过）：\u003Cp\u003E1.裁剪工具（快捷键C）， 选中 切片工具：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-a313eb8a7973bcdee0e39ffc_b.png\& data-rawwidth=\&234\& data-rawheight=\&158\& class=\&content_image\& width=\&234\&\u003E2.选中要导出的图标（建议快键键z用缩放工具放大然后选切图区）：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-bbd852df0e62eb6ebd6cb951d350757e_b.png\& data-rawwidth=\&288\& data-rawheight=\&217\& class=\&content_image\& width=\&288\&\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-852f9df5ac_b.png\& data-rawwidth=\&858\& data-rawheight=\&234\& class=\&origin_image zh-lightbox-thumb\& width=\&858\& data-original=\&https:\u002F\\u002Fv2-852f9df5ac_r.png\&\u003E3.导出为web格式图片快捷键：Alt+Shift+Ctrl+S(mac: Alt+Shift+Commond+S)\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-36fdb8ab9b12c27f3ac666ce61ec4ad7_b.png\& data-rawwidth=\&314\& data-rawheight=\&318\& class=\&content_image\& width=\&314\&\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-63e0adc3ba8879513ffa8d_b.png\& data-rawwidth=\&366\& data-rawheight=\&144\& class=\&content_image\& width=\&366\&\u003E\u003Cp\u003E需要说下的， 新版本 photoshop 从2015 CC开始就不用这么麻烦去切图了， 直接选中小图标图层右键“快速导出为PNG”， 即可得到对应小图标的png文件；\u003C\u002Fp\u003E\u003Cp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fd20d377c69d34ddd18d8e_b.png\& data-rawwidth=\&213\& data-rawheight=\&143\& class=\&content_image\& width=\&213\&\u003EPhotoshop软件版本不够新怎么办？ 你可以看看 \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F21-photoshop-plugins-for-designer.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E21款强大高效的Photoshop扩展插件\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cbr\u003E第10个Breezy 即为切图插件；快速导出 或 切图 成功后， 就有了以下四个小图标了：\u003Cbr\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-f049bdb7b76ee11_b.png\& data-rawwidth=\&207\& data-rawheight=\&133\& class=\&content_image\& width=\&207\&\u003E小图标素材整理好后， 接下里就是针对上述页面效果的各种实现以及对比了。\u003Cbr\u003E\u003Ch2\u003E传统网页调用小图标（原始方式）\u003C\u002Fh2\u003E首先说下雪碧图技术没推广开来 或 新手小白开发以上效果时， 是这样实现的：\u003Cp\u003Edemo地址： \u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fwteam-xq.github.io\u002FtestDemo\u002Fsass\u002Fgulp-sass\u002Findex_orig.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小图标调用Demo(原始版)\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E代码地址：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fwteam-xq\u002FtestDemo\u002Fblob\u002Fmaster\u002Fsass\u002Fgulp-sass\u002Findex_orig.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小图标调用源码(原始版)\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E分别为四个小图标定义不同的四张小图标， 关键样式代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-css\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nc\&\u003E.ps_demo_wrap\u003C\u002Fspan\u003E \u003Cspan class=\&nc\&\u003E.demo_icon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&nb\&\u003Eposition\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Erelative\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&nb\&\u003Efloat\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Eleft\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&nb\&\u003Emargin\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&m\&\u003E13px\u003C\u002Fspan\u003E \u003Cspan class=\&m\&\u003E0px\u003C\u002Fspan\u003E \u003Cspan class=\&m\&\u003E0px\u003C\u002Fspan\u003E \u003Cspan class=\&m\&\u003E10px\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&nb\&\u003Ecursor\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Epointer\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&nb\&\u003Ewidth\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&m\&\u003E54px\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&nb\&\u003Eheight\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&m\&\u003E54px\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&nc\&\u003E.ps_demo_wrap\u003C\u002Fspan\u003E \u003Cspan class=\&nc\&\u003E.weibo_icon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Ebackground-image\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&sx\&\u003Eurl(\&..\u002Fscss\u002Fimages\u002Ficon_weibo.png\&)\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&nc\&\u003E.ps_demo_wrap\u003C\u002Fspan\u003E \u003Cspan class=\&nc\&\u003E.qq_icon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Ebackground-image\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&sx\&\u003Eurl(\&..\u002Fscss\u002Fimages\u002Ficon_qq.png\&)\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&nc\&\u003E.ps_demo_wrap\u003C\u002Fspan\u003E \u003Cspan class=\&nc\&\u003E.douban_icon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Ebackground-image\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&sx\&\u003Eurl(\&..\u002Fscss\u002Fimages\u002Ficon_douban.png\&)\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&nc\&\u003E.ps_demo_wrap\u003C\u002Fspan\u003E \u003Cspan class=\&nc\&\u003E.renren_icon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Ebackground-image\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&sx\&\u003Eurl(\&..\u002Fscss\u002Fimages\u002Ficon_renren.png\&)\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E不使用雪碧图， 单纯调用小图片有以下优缺点：\u003C\u002Fp\u003E\u003Cp\u003E优点：调用简单、维护方便；\n\u003Cbr\u003E缺点：请求文件过多、引发性能问题； \u003C\u002Fp\u003E\u003Cp\u003E为什么不建议使用该方式显示小图标？\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E每个小图标都单独调用一图片， 即意味着每个小图标的显示都产生一个HTTP请求；学习过\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002FliFarchive\u002F\u002F03\u002F1324746.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EHTTP相关知识\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E应该知道，一般情况下每次创建一 HTTP请求，请求到的内容 往往是次要的（除非文件特别大）， 性能开销主要在请求、以及响应阶段；使用以上方式实现如 斗鱼直播间\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fapp\u002Fdouyu\u002Fres\u002Fpage\u002Froom-normal\u002Flevel\u002Flevel-csssprite.png%3F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E雪碧图\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E或以下知乎的雪碧图， 造成的性能消耗肯定不小！\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-4cf4f96ede1aae1076b51_b.png\& data-rawwidth=\&308\& data-rawheight=\&250\& class=\&content_image\& width=\&308\&\u003E\u003Cp\u003E综上所述， 网站开发中遇到小图标显示， 优先考虑雪碧图实现； 那么问题来了， 小图标合并成一张图片，如果需求有改动导致雪碧图修改（新增或修改小图标）， 更糟糕的是多个开发人员的功能模块都得调用该雪碧图（意味着多人会修改到雪碧图）， 该如何开发、维护雪碧图呢？\u003C\u002Fp\u003E\u003Ch2\u003E雪碧图实现1： CSS Gaga\u003C\u002Fh2\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fcfb198c6cf3d7a6b75408d_b.jpg\& data-rawwidth=\&555\& data-rawheight=\&415\& class=\&origin_image zh-lightbox-thumb\& width=\&555\& data-original=\&https:\u002F\\u002Fv2-fcfb198c6cf3d7a6b75408d_r.jpg\&\u003E\u003Cbr\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Flearn\u002F93\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E慕课网雪碧图教程\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E推荐软件，\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fcssgaga\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ECssGaga 帮助索引\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cbr\u003EPS： 该软件只有windows版本， 并未找到mac版；\u003Cp\u003ECssGaga如何实现雪碧图呢？\u003C\u002Fp\u003E\u003Cp\u003E1.\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002FF\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E下载\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u