Html和Css合并和拆分制作大風(fēng)車的代碼及詳解

.說明：

推薦指數(shù)：★★★★

通俗易懂。

2.效果圖

3.一個(gè)含有內(nèi)部的css的html，名叫：風(fēng)車-1.html代碼：

<!--注釋法-->
<!--第1步：聲明：可以大小寫均可以：doctype=DOCTYPE-->
<!--doctype html-->
<!DOCTYPE html>

<!--第2步：html包起來，默認(rèn)lang=‘en’，所以也可以刪除-->
<!--像這樣：html-->
<html>
<html lang="en"-->
    <!--第2-1步：head部分設(shè)置-->
    <head>
        <!--第2-1-1步：固定格式meta和title設(shè)置-->
        <meta charset="UTF-8">
        <!--網(wǎng)頁(yè)名字自己隨意取-->
        <title>大風(fēng)車DIY1</title>
        <!--第2-1-2步：css的設(shè)置，因?yàn)楹?jiǎn)單所以直接寫在html的單個(gè)文件里-->
        <!--也可以作為外部文件引起css文件-->
        <style>
            #box {
                width: 10px;
                height: 10px;
                margin: 5px auto;
                position: relative;
            }

            #main {
                width: 400px;
                height: 400px;
                animation: dfc 1s linear infinite;
            }

            /*這是css的注釋方法*/
            /*風(fēng)車的每一扇葉的設(shè)置,因?yàn)?個(gè)扇葉的設(shè)置是一樣的，所以用這樣*/
            /*4個(gè)扇葉的共性設(shè)置*/
            .css1,
            .css2,
            .css3,
            .css4 {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                border-radius: 100px 100px 0 0;
                position: absolute;
                /*4個(gè)扇葉的顏色漸變?cè)O(shè)置*/
                background-image: linear-gradient(green, yellow);
            }
            /*扇葉1的個(gè)性設(shè)置*/
            .css1 {
                top: 100px;
            }
            /*扇葉2的個(gè)性設(shè)置*/
            .css2 {
                top: 50px;
                left: 150px;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }
            /*扇葉3的個(gè)性設(shè)置*/
            .css3 {
                top: 200px;
                left: 200px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            /*扇葉4的個(gè)性設(shè)置*/
            .css4 {
                top: 250px;
                left: 50px;
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                transform: rotate(270deg);
            }

            /*中間的圓形的設(shè)置*/
            .ssss {
                width: 100px;
                height: 100px;
                border-radius: 100%;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 10;
                /*請(qǐng)注意下面css的顏色設(shè)置，可以是小寫的英文字母，也可以是大寫的，還可以是十六進(jìn)制*/
                /*中間圓的漸變顏色設(shè)置*/
                background-image: radial-gradient(pink, blue);
            }
            /*風(fēng)車的豎直桿的設(shè)置*/
            .hhh {
                width: 2px;
                height: 250px;
                background-image: radial-gradient(black, RED);
                position: absolute;
                top: 200px;
                left: 199px;
                z-index: -1;
            }
            /*運(yùn)動(dòng)的功能定義*/
            @keyframes dfc {
                0% {
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotate( 90deg);
                    -moz-transform: rotate( 90deg);
                    -ms-transform: rotate( 90deg);
                    -o-transform: rotate( 90deg);
                    transform: rotate( 90deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotate(270deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <!--第2-2步：body部分設(shè)置-->
    <body>
        <div id="box">
            <!--box的div容器里面有風(fēng)車桿和main的4個(gè)運(yùn)動(dòng)的扇葉-->
            <div id="main">
                <!--main里的css是要一起運(yùn)動(dòng)的-->
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <!--風(fēng)車的桿是不動(dòng)的，所以單獨(dú)放在一個(gè)div容器中-->
            <div class="hhh"></div>
        </div>

    </body>

</html>

4.如何將css拆開，單獨(dú)呢？大型項(xiàng)目都是css單獨(dú)一個(gè)文件夾，里面一大堆css文件。

4.1 建一個(gè)fengche.css文件，將下面代碼復(fù)制進(jìn)去，和風(fēng)車-2.html放在同一個(gè)文件夾中。

fengche.css的代碼：

#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}

#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}

/*這是css的注釋方法*/
/*風(fēng)車的每一扇葉的設(shè)置,因?yàn)?個(gè)扇葉的設(shè)置是一樣的，所以用這樣*/
/*4個(gè)扇葉的共性設(shè)置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4個(gè)扇葉的顏色漸變?cè)O(shè)置*/
background-image: linear-gradient(green, yellow);
}
/*扇葉1的個(gè)性設(shè)置*/
.css1 {
top: 100px;
}
/*扇葉2的個(gè)性設(shè)置*/
.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*扇葉3的個(gè)性設(shè)置*/
.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*扇葉4的個(gè)性設(shè)置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

/*中間的圓形的設(shè)置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*請(qǐng)注意下面css的顏色設(shè)置，可以是小寫的英文字母，也可以是大寫的，還可以是十六進(jìn)制*/
/*中間圓的漸變顏色設(shè)置*/
background-image: radial-gradient(pink, blue);
}
/*風(fēng)車的豎直桿的設(shè)置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*運(yùn)動(dòng)的功能定義*/
@keyframes dfc {
0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
25% {
    -webkit-transform: rotate( 90deg);
    -moz-transform: rotate( 90deg);
    -ms-transform: rotate( 90deg);
    -o-transform: rotate( 90deg);
    transform: rotate( 90deg);
}
50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
75% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

4.2 風(fēng)車-2.html的代碼：注意修改部分。


<!DOCTYPE html>
<html>
<html lang="en"-->
    <head>
        <meta charset="UTF-8">
        <title>大風(fēng)車DIY2</title>
        <!--注意放在同一個(gè)文件夾下，本機(jī)是deepin的linux系統(tǒng)，win可能不同-->
        <link rel="stylesheet" href="./fengche.css" />
    </head>
    <body>
        <div id="box">
            <div id="main">
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <div class="hhh"></div>
        </div>

    </body>
</html>

怎么樣？通俗易懂吧，看了后，立馬入門。

者：lzaneli，騰訊 TEG 前端開發(fā)工程師

“合并前文件還在的，合并后就不見了”、“我遇到 Git 合并的 bug 了” 是兩句經(jīng)常聽到的話，但真的是 Git 的 bug 么？或許只是你的預(yù)期不對(duì)。本文通過講解三向合并和 Git 的合并策略，step by step 介紹 Git 是怎么做一個(gè)合并的，讓大家對(duì) Git 的合并結(jié)果有一個(gè)準(zhǔn)確的預(yù)期，并且避免發(fā)生合并事故。

故事時(shí)間

在開始正文之前，先來聽一下這個(gè)故事。

如下圖，小明從節(jié)點(diǎn) A 拉了一條 dev 分支出來，在節(jié)點(diǎn) B 中新增了一個(gè)文件 http.js，并且合并到 master 分支，合并節(jié)點(diǎn)為 E。這個(gè)時(shí)候發(fā)現(xiàn)會(huì)引起線上 bug，趕緊撤回這個(gè)合并，新增一個(gè) revert 節(jié)點(diǎn) E'。過了幾天小明繼續(xù)在 dev 分支上面開發(fā)新增了一個(gè)文件 main.js，并在這個(gè)文件中 import 了 http.js 里面的邏輯，在 dev 分支上面一切運(yùn)行正常。可當(dāng)他將此時(shí)的 dev 分支合并到 master 時(shí)候卻發(fā)現(xiàn)，http.js 文件不見了，導(dǎo)致 main.js 里面的邏輯運(yùn)行報(bào)錯(cuò)了。但這次合并并沒有任何沖突。他又得重新做了一下 revert，并且迷茫的懷疑是 Git 的 bug。

兩句經(jīng)常聽到的話：

—— ”合并前文件還在的，合并后就不見了“

—— ”我遇到 Git 的 bug 了“

相信很多同學(xué)或多或少在不熟悉 Git 合并策略的時(shí)候都會(huì)發(fā)生過類似上面的事情，明明在合并前文件還在的，為什么合并后文件就不在了么？一度還懷疑是 Git 的 bug。這篇文章的目的就是想跟大家講清楚 Git 是怎么去合并分支的，以及一些底層的基礎(chǔ)概念，從而避免發(fā)生如故事中的問題，并對(duì) Git 的合并結(jié)果有一個(gè)準(zhǔn)確的預(yù)期。

如何合并兩個(gè)文件

在看怎么合并兩個(gè)分支之前，我們先來看一下怎么合并兩個(gè)文件，因?yàn)閮蓚€(gè)文件的合并是兩個(gè)分支合并的基礎(chǔ)。

大家應(yīng)該都聽說過“三向合并”這個(gè)詞，不知道大家有沒有思考過為什么兩個(gè)文件的合并需要三向合并，只有二向是否可以自動(dòng)完成合并。如下圖

很明顯答案是不能，如上圖的例子，Git 沒法確定這一行代碼是我修改的，還是對(duì)方修改的，或者之前就沒有這行代碼，是我們倆同時(shí)新增的。此時(shí) Git 沒辦法幫我們做自動(dòng)合并。

所以我們需要三向合并，所謂三向合并，就是找到兩個(gè)文件的一個(gè)合并 base，如下圖，這樣子 Git 就可以很清楚的知道說，對(duì)方修改了這一行代碼，而我們沒有修改，自動(dòng)幫我們合并這兩個(gè)文件為 Print("hello")。

接下來我們了解一下什么是沖突？沖突簡(jiǎn)單的來說就是三向合并中的三方都互不相同，即參考合并 base，我們的分支和別人的分支都對(duì)同個(gè)地方做了修改。

Git 的合并策略

了解完怎么合并兩個(gè)文件之后，我們來看一個(gè)使用 git merge 來做分支合并。如上圖，將 master 分支合并到 feature 分支上，會(huì)新增一個(gè) commit 節(jié)點(diǎn)來記錄這次合并。

Git 會(huì)有很多合并策略，其中常見的是 Fast-forward、Recursive 、Ours、Theirs、Octopus。下面分別介紹不同合并策略的原理以及應(yīng)用場(chǎng)景。默認(rèn) Git 會(huì)幫你自動(dòng)挑選合適的合并策略，如果你需要強(qiáng)制指定，使用git merge -s <策略名字>

了解 Git 合并策略的原理可以讓你對(duì) Git 的合并結(jié)果有一個(gè)準(zhǔn)確的預(yù)期。

Fast-forward

Fast-forward 是最簡(jiǎn)單的一種合并策略，如上圖中將 some feature 分支合并進(jìn) master 分支，Git 只需要將 master 分支的指向移動(dòng)到最后一個(gè) commit 節(jié)點(diǎn)上。

Fast-forward 是 Git 在合并兩個(gè)沒有分叉的分支時(shí)的默認(rèn)行為，如果不想要這種表現(xiàn)，想明確記錄下每次的合并，可以使用git merge --no-ff。

Recursive

Recursive 是 Git 分支合并策略中最重要也是最常用的策略，是 Git 在合并兩個(gè)有分叉的分支時(shí)的默認(rèn)行為。其算法可以簡(jiǎn)單描述為：遞歸尋找路徑最短的唯一共同祖先節(jié)點(diǎn)，然后以其為 base 節(jié)點(diǎn)進(jìn)行遞歸三向合并。說起來有點(diǎn)繞，下面通過例子來解釋。

如下圖這種簡(jiǎn)單的情況，圓圈里面的英文字母為當(dāng)前 commit 的文件內(nèi)容，當(dāng)我們要合并中間兩個(gè)節(jié)點(diǎn)的時(shí)候，找到他們的共同祖先節(jié)點(diǎn)（左邊第一個(gè)），接著進(jìn)行三向合并得到結(jié)果為 B。（因?yàn)楹喜⒌?base 是“A”，下圖靠下的分支沒有修改內(nèi)容仍為“A”，下圖靠上的分支修改成了“B”，所以合并結(jié)果為“B”）。

但現(xiàn)實(shí)情況總是復(fù)雜得多，會(huì)出現(xiàn)歷史記錄鏈互相交叉等情況，如下圖：

當(dāng) Git 在尋找路徑最短的共同祖先節(jié)點(diǎn)的時(shí)候，可以找到兩個(gè)節(jié)點(diǎn)的，如果 Git 選用下圖這一個(gè)節(jié)點(diǎn)，那么 Git 將無法自動(dòng)的合并。因?yàn)楦鶕?jù)三向合并，這里是是有沖突的，需要手動(dòng)解決。（base 為“A“，合并的兩個(gè)分支內(nèi)容為”C“和”B“）

而如果 Git 選用的是下圖這個(gè)節(jié)點(diǎn)作為合并的 base 時(shí)，根據(jù)三向合并，Git 就可以直接自動(dòng)合并得出結(jié)果“C”。（base 為“B“，合并的兩個(gè)分支內(nèi)容為”C“和”B“）

作為人類，在這個(gè)例子里面我們很自然的就可以看出來合并的結(jié)果應(yīng)該是“C”（如下圖，節(jié)點(diǎn) 4、5 都已經(jīng)是“B”了，節(jié)點(diǎn) 6 修改成“C”，所以合并的預(yù)期為“C”）

那怎么保證 Git 能夠找到正確的合并 base 節(jié)點(diǎn)，盡可能的減少?zèng)_突呢？答案就是，Git 在尋找路徑最短的共同祖先節(jié)點(diǎn)時(shí)，如果滿足條件的祖先節(jié)點(diǎn)不唯一，那么 Git 會(huì)繼續(xù)遞歸往下尋找直至唯一。還是以剛剛這個(gè)例子圖解。

如下圖所示，我們想要合并節(jié)點(diǎn) 5 和節(jié)點(diǎn) 6，Git 找到路徑最短的祖先節(jié)點(diǎn) 2 和 3。

因?yàn)楣餐嫦裙?jié)點(diǎn)不唯一，所以 Git 遞歸以節(jié)點(diǎn) 2 和節(jié)點(diǎn) 3 為我們要合并的節(jié)點(diǎn)，尋找他們的路徑最短的共同祖先，找到唯一的節(jié)點(diǎn) 1。

接著 Git 以節(jié)點(diǎn) 1 為 base，對(duì)節(jié)點(diǎn) 2 和節(jié)點(diǎn) 3 做三向合并，得到一個(gè)臨時(shí)節(jié)點(diǎn)，根據(jù)三向合并的結(jié)果，這個(gè)節(jié)點(diǎn)的內(nèi)容為“B”。

再以這個(gè)臨時(shí)節(jié)點(diǎn)為 base，對(duì)節(jié)點(diǎn) 5 和節(jié)點(diǎn) 6 做三向合并，得到合并節(jié)點(diǎn) 7，根據(jù)三向合并的結(jié)果，節(jié)點(diǎn) 7 的內(nèi)容為“C”

至此 Git 完成遞歸合并，自動(dòng)合并節(jié)點(diǎn) 5 和節(jié)點(diǎn) 6，結(jié)果為“C”，沒有沖突。

Recursive 策略已經(jīng)被大量的場(chǎng)景證明它是一個(gè)盡量減少?zèng)_突的合并策略，我們可以看到有趣的一點(diǎn)是，對(duì)于兩個(gè)合并分支的中間節(jié)點(diǎn)（如上圖節(jié)點(diǎn) 4，5），只參與了 base 的計(jì)算，而最終真正被三向合并拿來做合并的節(jié)點(diǎn)，只包括末端以及 base 節(jié)點(diǎn)。

需要注意 Git 只是使用這些策略盡量的去幫你減少?zèng)_突，如果沖突不可避免，那 Git 就會(huì)提示沖突，需要手工解決。（也就是真正意義上的沖突）。

Ours & Theirs

Ours 和 Theirs 這兩種合并策略也是比較簡(jiǎn)單的，簡(jiǎn)單來說就是保留雙方的歷史記錄，但完全忽略掉這一方的文件變更。如下圖在 master 分支里面執(zhí)行g(shù)it merge -s ours dev，會(huì)產(chǎn)生藍(lán)色的這一個(gè)合并節(jié)點(diǎn)，其內(nèi)容跟其上一個(gè)節(jié)點(diǎn)（master 分支方向上的）完全一樣，即 master 分支合并前后項(xiàng)目文件沒有任何變動(dòng)。

而如果使用 theirs 則完全相反，完全拋棄掉當(dāng)前分支的文件內(nèi)容，直接采用對(duì)方分支的文件內(nèi)容。

這兩種策略的一個(gè)使用場(chǎng)景是比如現(xiàn)在要實(shí)現(xiàn)同一功能，你同時(shí)嘗試了兩個(gè)方案，分別在分支是 dev1 和 dev2 上，最后經(jīng)過測(cè)試你選用了 dev2 這個(gè)方案。但你不想丟棄 dev1 的這樣一個(gè)嘗試，希望把它合入主干方便后期查看，這個(gè)時(shí)候你就可以在 dev2 分支中執(zhí)行g(shù)it merge -s ours dev1。

Octopus

這種合并策略比較神奇，一般來說我們的合并節(jié)點(diǎn)都只有兩個(gè) parent（即合并兩條分支），而這種合并策略可以做兩個(gè)以上分支的合并，這也是 git merge 兩個(gè)以上分支時(shí)的默認(rèn)行為。比如在 dev1 分支上執(zhí)行g(shù)it merge dev2 dev3。

他的一個(gè)使用場(chǎng)景是在測(cè)試環(huán)境或預(yù)發(fā)布環(huán)境，你需要將多個(gè)開發(fā)分支修改的內(nèi)容合并在一起，如果不用這個(gè)策略，你每次只能合并一個(gè)分支，這樣就會(huì)導(dǎo)致大量的合并節(jié)點(diǎn)產(chǎn)生。而使用 Octopus 這種合并策略就可以用一個(gè)合并節(jié)點(diǎn)將他們?nèi)亢喜⑦M(jìn)來。

Git rebase

git rebase 也是一種經(jīng)常被用來做合并的方法，其與 git merge 的最大區(qū)別是，他會(huì)更改變更歷史對(duì)應(yīng)的 commit 節(jié)點(diǎn)。

如下圖，當(dāng)在 feature 分支中執(zhí)行 rebase master 時(shí)，Git 會(huì)以 master 分支對(duì)應(yīng)的 commit 節(jié)點(diǎn)為起點(diǎn)，新增兩個(gè)全新的 commit 代替 feature 分支中的 commit 節(jié)點(diǎn)。其原因是新的 commit 指向的 parent 變了，所以對(duì)應(yīng)的 SHA1 值也會(huì)改變，所以沒辦法復(fù)用原 feature 分支中的 commit。（這句話的理解需要這篇文章的基礎(chǔ)知識(shí)）

對(duì)于合并時(shí)候要使用 git merge 還是 git rebase 的爭(zhēng)論，我個(gè)人的看法是沒有銀彈，根據(jù)團(tuán)隊(duì)和項(xiàng)目習(xí)慣選擇就可以。git rebase 可以給我們帶來清晰的歷史記錄，git merge 可以保留真實(shí)的提交時(shí)間等信息，并且不容易出問題，處理沖突也比較方便。唯一有一點(diǎn)需要注意的是，不要對(duì)已經(jīng)處于遠(yuǎn)端的多人共用分支做 rebase 操作。

我個(gè)人的一個(gè)習(xí)慣是：對(duì)于本地的分支或者確定只有一個(gè)人使用的遠(yuǎn)端分支用 rebase，其余情況用 merge。

rebase 還有一個(gè)非常好用的東西叫 interactive 模式，使用方法是git rebase -i。可以實(shí)現(xiàn)壓縮幾個(gè) commit，修改 commit 信息，拋棄某個(gè) commit 等功能。比如說我要壓縮下圖 260a12a5、956e1d18，將他們與 9dae0027 合并為一個(gè) commit，我只需將 260a12a5、956e1d18 前面的 pick 改成“s”，然后保存就可以了。

限于篇幅，git rebase -i 還有很多實(shí)用的功能暫不展開，感興趣的同學(xué)可以自己研究一下。

總結(jié)

現(xiàn)在我們?cè)賮砜匆幌挛恼麻_頭的例子，我們就可以理解為什么最后一次 merge 會(huì)導(dǎo)致 http.js 文件不見了。根據(jù) Git 的合并策略，在合并兩個(gè)有分叉的分支（上圖中的 D、E‘）時(shí)，Git 默認(rèn)會(huì)選擇 Recursive 策略。找到 D 和 E’的最短路徑共同祖先節(jié)點(diǎn) B，以 B 為 base，對(duì) D，E‘做三向合并。B 中有 http.js，D 中有 http.js 和 main.js，E’中什么都沒有。根據(jù)三向合并，B、D 中都有 http.js 且沒有變更，E‘刪除了 http.js，所以合并結(jié)果就是沒有 http.js，沒有沖突，所以 http.js 文件不見了。

這個(gè)例子理解原理之后解決方法有很多，這里簡(jiǎn)單帶過兩個(gè)方法：1. revert 節(jié)點(diǎn) E'之后，此時(shí)的 dev 分支要拋棄刪除掉，重新從 E'節(jié)點(diǎn)拉出分支繼續(xù)工作，而不是在原 dev 分支上繼續(xù)開發(fā)節(jié)點(diǎn) D；2. 在節(jié)點(diǎn) D 合并回 E’節(jié)點(diǎn)時(shí)，先 revert 一下 E‘節(jié)點(diǎn)生成 E’‘（即 revert 的 revert），再將節(jié)點(diǎn) D 合并進(jìn)來。

Git 有很多種分支合并策略，本文介紹了 Fast-forward、Recursive、Ours/Theirs、Octopus 合并策略以及三向合并。掌握這些合并策略以及他們的使用場(chǎng)景可以讓你避免發(fā)生一些合并問題，并對(duì)合并結(jié)果有一個(gè)準(zhǔn)確的預(yù)期。

希望這篇文章對(duì)大家有用，感興趣的同學(xué)可以逛一逛我的博客 www.lzane.com 或看看我的其他文章。

參考

三向合并 http://blog.plasticscm.com/2016/02/three-way-merging-look-under-hood.html
Recursive 合并【視頻】https://www.youtube.com/watch?v=Lg1igaCtAck
書籍 Scott Chacon, Ben Straub - Pro Git-Apress (2014)
書籍 Jon Loeliger, Matthew McCullough - Version Control with Git, 2nd Edition - O’Reilly Media (2012)

鄭同學(xué)在開發(fā)我們系統(tǒng)的時(shí)候發(fā)現(xiàn)首頁(yè)靜態(tài)資源多次請(qǐng)求服務(wù)器加載緩慢。帶著這個(gè)問題他去訪問了淘寶，發(fā)現(xiàn)了淘寶一條請(qǐng)求里有多個(gè)Js。最后百度一下發(fā)現(xiàn)了Concat。Concat是淘寶開發(fā)的一個(gè)Nginx模塊，可以將多個(gè)Js/Css合并成一個(gè)請(qǐng)求（當(dāng)然在合理的情況下），這樣可以減少對(duì)服務(wù)器的請(qǐng)求個(gè)數(shù)，達(dá)到靜態(tài)資源相對(duì)較快的加載。下面我們看一下具體的操作。

一、Nginx+Concat安裝

下載Nginx 和Concat
wget http://nginx.org/download/nginx-1.6.2.tar.gz
git clone git://github.com/alibaba/nginx-http-concat.git
下載Concat可能需要翻墻
解壓安裝
將下載好的Concat 放到某目錄，本次試驗(yàn)放入/usr/local/src/
tar zxvf nginx-1.6.2.tar.gz
cd nginx-1.6.2
./configure
--prefix=/usr/local/webserver/nginx
--with-http_stub_status_module
--with-http_ssl_module
--add-module=/usr/local/src/nginx-http-concat
以上加粗部分為Concat 目錄，根據(jù)實(shí)際情況修改
make && make install
測(cè)試

在 /usr/local/webserver/nginx/html 新建css 目錄
mkdir -p /usr/local/webserver/nginx/html/css
新建 a.css 和 b.css 內(nèi)容分別為
a{

color: red;

}

color: blue;

}

c)修改nginx配置文件nginx.conf,新增如下內(nèi)容

location /css/ {

concat on;

concat_max_files 20;

}

d)啟動(dòng)nginx

/usr/local/webserver/nginx/sbin/nginx

e)觀察瀏覽器輸出

瀏覽器輸入 http://IP /css/??a.css,b.css

觀察瀏覽器輸出，出現(xiàn)下圖說明配置成功

由上圖看出，兩個(gè)css已經(jīng)合并成功一個(gè)css

二、配置實(shí)際項(xiàng)目

此步驟需要根據(jù)實(shí)際情況修改，本次試驗(yàn)針對(duì) javashop 多店系統(tǒng)

配置 Js/Css 合并
nginx.conf配置
location /themes/b2b2cv2/css/ {
root /home/www/b2b2c_1/;
concat on;
concat_max_files 20;
}
location /themes/b2b2cv2/js/ {
root /home/www/b2b2c_1/;
concat on;
concat_max_files 20;
}
加粗部分根據(jù)實(shí)際情況修改
根據(jù)對(duì)應(yīng)規(guī)則修改項(xiàng)目(修改完成后需要重新啟動(dòng)nginx)

例如：

可根據(jù)實(shí)際情況修改。

在線咨詢

上一篇：如何通過 Python 打造一款簡(jiǎn)易版 AlphaGo?
下一篇：快速了解JavaScript文本框操作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商