整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.說明：
推薦指數：★★★★
通俗易懂。
2.效果圖
3.一個含有內部的css的html，名叫：風車-1.html代碼：
<!--注釋法-->
<!--第1步：聲明：可以大小寫均可以：doctype=DOCTYPE-->
<!--doctype html-->
<!DOCTYPE html>
<!--第2步：html包起來，默認lang=‘en’，所以也可以刪除-->
<!--像這樣：html-->
<html>
<html lang="en"-->
<!--第2-1步：head部分設置-->
<head>
<!--第2-1-1步：固定格式meta和title設置-->
<meta charset="UTF-8">
<!--網頁名字自己隨意取-->
<title>大風車DIY1</title>
<!--第2-1-2步：css的設置，因為簡單所以直接寫在html的單個文件里-->
<!--也可以作為外部文件引起css文件-->
<style>
#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}
#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}
/*這是css的注釋方法*/
/*風車的每一扇葉的設置,因為4個扇葉的設置是一樣的，所以用這樣*/
/*4個扇葉的共性設置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4個扇葉的顏色漸變設置*/
background-image: linear-gradient(green, yellow);
}
/*扇葉1的個性設置*/
.css1 {
top: 100px;
}
/*扇葉2的個性設置*/
.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的個性設置*/
.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的個性設置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*中間的圓形的設置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*請注意下面css的顏色設置，可以是小寫的英文字母，也可以是大寫的，還可以是十六進制*/
/*中間圓的漸變顏色設置*/
background-image: radial-gradient(pink, blue);
}
/*風車的豎直桿的設置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*運動的功能定義*/
@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部分設置-->
<body>
<div id="box">
<!--box的div容器里面有風車桿和main的4個運動的扇葉-->
<div id="main">
<!--main里的css是要一起運動的-->
<div class="css1"></div>
<div class="css2"></div>
<div class="css3"></div>
<div class="css4"></div>
<div class="ssss"></div>
</div>
<!--風車的桿是不動的，所以單獨放在一個div容器中-->
<div class="hhh"></div>
</div>
</body>
</html>4.如何將css拆開，單獨呢？大型項目都是css單獨一個文件夾，里面一大堆css文件。
4.1 建一個fengche.css文件，將下面代碼復制進去，和風車-2.html放在同一個文件夾中。
fengche.css的代碼：
#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}
#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}
/*這是css的注釋方法*/
/*風車的每一扇葉的設置,因為4個扇葉的設置是一樣的，所以用這樣*/
/*4個扇葉的共性設置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4個扇葉的顏色漸變設置*/
background-image: linear-gradient(green, yellow);
}
/*扇葉1的個性設置*/
.css1 {
top: 100px;
}
/*扇葉2的個性設置*/
.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的個性設置*/
.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的個性設置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*中間的圓形的設置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*請注意下面css的顏色設置，可以是小寫的英文字母，也可以是大寫的，還可以是十六進制*/
/*中間圓的漸變顏色設置*/
background-image: radial-gradient(pink, blue);
}
/*風車的豎直桿的設置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*運動的功能定義*/
@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 風車-2.html的代碼：注意修改部分。
<!DOCTYPE html>
<html>
<html lang="en"-->
<head>
<meta charset="UTF-8">
<title>大風車DIY2</title>
<!--注意放在同一個文件夾下，本機是deepin的linux系統，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 前端開發工程師
“合并前文件還在的，合并后就不見了”、“我遇到 Git 合并的 bug 了” 是兩句經常聽到的話，但真的是 Git 的 bug 么？或許只是你的預期不對。本文通過講解三向合并和 Git 的合并策略，step by step 介紹 Git 是怎么做一個合并的，讓大家對 Git 的合并結果有一個準確的預期，并且避免發生合并事故。
在開始正文之前，先來聽一下這個故事。
如下圖，小明從節點 A 拉了一條 dev 分支出來，在節點 B 中新增了一個文件 http.js，并且合并到 master 分支，合并節點為 E。這個時候發現會引起線上 bug，趕緊撤回這個合并，新增一個 revert 節點 E'。過了幾天小明繼續在 dev 分支上面開發新增了一個文件 main.js，并在這個文件中 import 了 http.js 里面的邏輯，在 dev 分支上面一切運行正常。可當他將此時的 dev 分支合并到 master 時候卻發現，http.js 文件不見了，導致 main.js 里面的邏輯運行報錯了。但這次合并并沒有任何沖突。他又得重新做了一下 revert，并且迷茫的懷疑是 Git 的 bug。
兩句經常聽到的話：
—— ”合并前文件還在的，合并后就不見了“
—— ”我遇到 Git 的 bug 了“
相信很多同學或多或少在不熟悉 Git 合并策略的時候都會發生過類似上面的事情，明明在合并前文件還在的，為什么合并后文件就不在了么？一度還懷疑是 Git 的 bug。這篇文章的目的就是想跟大家講清楚 Git 是怎么去合并分支的，以及一些底層的基礎概念，從而避免發生如故事中的問題，并對 Git 的合并結果有一個準確的預期。
在看怎么合并兩個分支之前，我們先來看一下怎么合并兩個文件，因為兩個文件的合并是兩個分支合并的基礎。
大家應該都聽說過“三向合并”這個詞，不知道大家有沒有思考過為什么兩個文件的合并需要三向合并，只有二向是否可以自動完成合并。如下圖
很明顯答案是不能，如上圖的例子，Git 沒法確定這一行代碼是我修改的，還是對方修改的，或者之前就沒有這行代碼，是我們倆同時新增的。此時 Git 沒辦法幫我們做自動合并。
所以我們需要三向合并，所謂三向合并，就是找到兩個文件的一個合并 base，如下圖，這樣子 Git 就可以很清楚的知道說，對方修改了這一行代碼，而我們沒有修改，自動幫我們合并這兩個文件為 Print("hello")。
接下來我們了解一下什么是沖突？沖突簡單的來說就是三向合并中的三方都互不相同，即參考合并 base，我們的分支和別人的分支都對同個地方做了修改。
了解完怎么合并兩個文件之后，我們來看一個使用 git merge 來做分支合并。如上圖，將 master 分支合并到 feature 分支上，會新增一個 commit 節點來記錄這次合并。
Git 會有很多合并策略，其中常見的是 Fast-forward、Recursive 、Ours、Theirs、Octopus。下面分別介紹不同合并策略的原理以及應用場景。默認 Git 會幫你自動挑選合適的合并策略，如果你需要強制指定，使用git merge -s <策略名字>
了解 Git 合并策略的原理可以讓你對 Git 的合并結果有一個準確的預期。
Fast-forward 是最簡單的一種合并策略，如上圖中將 some feature 分支合并進 master 分支，Git 只需要將 master 分支的指向移動到最后一個 commit 節點上。
Fast-forward 是 Git 在合并兩個沒有分叉的分支時的默認行為，如果不想要這種表現，想明確記錄下每次的合并，可以使用git merge --no-ff。
Recursive 是 Git 分支合并策略中最重要也是最常用的策略，是 Git 在合并兩個有分叉的分支時的默認行為。其算法可以簡單描述為：遞歸尋找路徑最短的唯一共同祖先節點，然后以其為 base 節點進行遞歸三向合并。說起來有點繞，下面通過例子來解釋。
如下圖這種簡單的情況，圓圈里面的英文字母為當前 commit 的文件內容，當我們要合并中間兩個節點的時候，找到他們的共同祖先節點（左邊第一個），接著進行三向合并得到結果為 B。（因為合并的 base 是“A”，下圖靠下的分支沒有修改內容仍為“A”，下圖靠上的分支修改成了“B”，所以合并結果為“B”）。
但現實情況總是復雜得多，會出現歷史記錄鏈互相交叉等情況，如下圖：
當 Git 在尋找路徑最短的共同祖先節點的時候，可以找到兩個節點的，如果 Git 選用下圖這一個節點，那么 Git 將無法自動的合并。因為根據三向合并，這里是是有沖突的，需要手動解決。（base 為“A“，合并的兩個分支內容為”C“和”B“）
而如果 Git 選用的是下圖這個節點作為合并的 base 時，根據三向合并，Git 就可以直接自動合并得出結果“C”。（base 為“B“，合并的兩個分支內容為”C“和”B“）
作為人類，在這個例子里面我們很自然的就可以看出來合并的結果應該是“C”（如下圖，節點 4、5 都已經是“B”了，節點 6 修改成“C”，所以合并的預期為“C”）
那怎么保證 Git 能夠找到正確的合并 base 節點，盡可能的減少沖突呢？答案就是，Git 在尋找路徑最短的共同祖先節點時，如果滿足條件的祖先節點不唯一，那么 Git 會繼續遞歸往下尋找直至唯一。還是以剛剛這個例子圖解。
如下圖所示，我們想要合并節點 5 和節點 6，Git 找到路徑最短的祖先節點 2 和 3。
因為共同祖先節點不唯一，所以 Git 遞歸以節點 2 和節點 3 為我們要合并的節點，尋找他們的路徑最短的共同祖先，找到唯一的節點 1。
接著 Git 以節點 1 為 base，對節點 2 和節點 3 做三向合并，得到一個臨時節點，根據三向合并的結果，這個節點的內容為“B”。
再以這個臨時節點為 base，對節點 5 和節點 6 做三向合并，得到合并節點 7，根據三向合并的結果，節點 7 的內容為“C”
至此 Git 完成遞歸合并，自動合并節點 5 和節點 6，結果為“C”，沒有沖突。
Recursive 策略已經被大量的場景證明它是一個盡量減少沖突的合并策略，我們可以看到有趣的一點是，對于兩個合并分支的中間節點（如上圖節點 4，5），只參與了 base 的計算，而最終真正被三向合并拿來做合并的節點，只包括末端以及 base 節點。
需要注意 Git 只是使用這些策略盡量的去幫你減少沖突，如果沖突不可避免，那 Git 就會提示沖突，需要手工解決。（也就是真正意義上的沖突）。
Ours 和 Theirs 這兩種合并策略也是比較簡單的，簡單來說就是保留雙方的歷史記錄，但完全忽略掉這一方的文件變更。如下圖在 master 分支里面執行git merge -s ours dev，會產生藍色的這一個合并節點，其內容跟其上一個節點（master 分支方向上的）完全一樣，即 master 分支合并前后項目文件沒有任何變動。
而如果使用 theirs 則完全相反，完全拋棄掉當前分支的文件內容，直接采用對方分支的文件內容。
這兩種策略的一個使用場景是比如現在要實現同一功能，你同時嘗試了兩個方案，分別在分支是 dev1 和 dev2 上，最后經過測試你選用了 dev2 這個方案。但你不想丟棄 dev1 的這樣一個嘗試，希望把它合入主干方便后期查看，這個時候你就可以在 dev2 分支中執行git merge -s ours dev1。
這種合并策略比較神奇，一般來說我們的合并節點都只有兩個 parent（即合并兩條分支），而這種合并策略可以做兩個以上分支的合并，這也是 git merge 兩個以上分支時的默認行為。比如在 dev1 分支上執行git merge dev2 dev3。
他的一個使用場景是在測試環境或預發布環境，你需要將多個開發分支修改的內容合并在一起，如果不用這個策略，你每次只能合并一個分支，這樣就會導致大量的合并節點產生。而使用 Octopus 這種合并策略就可以用一個合并節點將他們全部合并進來。
git rebase 也是一種經常被用來做合并的方法，其與 git merge 的最大區別是，他會更改變更歷史對應的 commit 節點。
如下圖，當在 feature 分支中執行 rebase master 時，Git 會以 master 分支對應的 commit 節點為起點，新增兩個全新的 commit 代替 feature 分支中的 commit 節點。其原因是新的 commit 指向的 parent 變了，所以對應的 SHA1 值也會改變，所以沒辦法復用原 feature 分支中的 commit。（這句話的理解需要這篇文章的基礎知識）
對于合并時候要使用 git merge 還是 git rebase 的爭論，我個人的看法是沒有銀彈，根據團隊和項目習慣選擇就可以。git rebase 可以給我們帶來清晰的歷史記錄，git merge 可以保留真實的提交時間等信息，并且不容易出問題，處理沖突也比較方便。唯一有一點需要注意的是，不要對已經處于遠端的多人共用分支做 rebase 操作。
我個人的一個習慣是：對于本地的分支或者確定只有一個人使用的遠端分支用 rebase，其余情況用 merge。
rebase 還有一個非常好用的東西叫 interactive 模式，使用方法是git rebase -i。可以實現壓縮幾個 commit，修改 commit 信息，拋棄某個 commit 等功能。比如說我要壓縮下圖 260a12a5、956e1d18，將他們與 9dae0027 合并為一個 commit，我只需將 260a12a5、956e1d18 前面的 pick 改成“s”，然后保存就可以了。
限于篇幅，git rebase -i 還有很多實用的功能暫不展開，感興趣的同學可以自己研究一下。
現在我們再來看一下文章開頭的例子，我們就可以理解為什么最后一次 merge 會導致 http.js 文件不見了。根據 Git 的合并策略，在合并兩個有分叉的分支（上圖中的 D、E‘）時，Git 默認會選擇 Recursive 策略。找到 D 和 E’的最短路徑共同祖先節點 B，以 B 為 base，對 D，E‘做三向合并。B 中有 http.js，D 中有 http.js 和 main.js，E’中什么都沒有。根據三向合并，B、D 中都有 http.js 且沒有變更，E‘刪除了 http.js，所以合并結果就是沒有 http.js，沒有沖突，所以 http.js 文件不見了。
這個例子理解原理之后解決方法有很多，這里簡單帶過兩個方法：1. revert 節點 E'之后，此時的 dev 分支要拋棄刪除掉，重新從 E'節點拉出分支繼續工作，而不是在原 dev 分支上繼續開發節點 D；2. 在節點 D 合并回 E’節點時，先 revert 一下 E‘節點生成 E’‘（即 revert 的 revert），再將節點 D 合并進來。
Git 有很多種分支合并策略，本文介紹了 Fast-forward、Recursive、Ours/Theirs、Octopus 合并策略以及三向合并。掌握這些合并策略以及他們的使用場景可以讓你避免發生一些合并問題，并對合并結果有一個準確的預期。
希望這篇文章對大家有用，感興趣的同學可以逛一逛我的博客 www.lzane.com 或看看我的其他文章。
參考
鄭同學在開發我們系統的時候發現首頁靜態資源多次請求服務器加載緩慢。帶著這個問題他去訪問了淘寶，發現了淘寶一條請求里有多個Js。最后百度一下發現了Concat。Concat是淘寶開發的一個Nginx模塊，可以將多個Js/Css合并成一個請求（當然在合理的情況下），這樣可以減少對服務器的請求個數，達到靜態資源相對較快的加載。下面我們看一下具體的操作。
下載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 放到某目錄，本次試驗放入/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 目錄，根據實際情況修改
make && make install
測試
在 /usr/local/webserver/nginx/html 新建css 目錄
mkdir -p /usr/local/webserver/nginx/html/css
新建 a.css 和 b.css 內容分別為
a{
color: red;
}
b{
color: blue;
}
c)修改nginx配置文件nginx.conf,新增如下內容
location /css/ {
concat on;
concat_max_files 20;
}
d)啟動nginx
/usr/local/webserver/nginx/sbin/nginx
e)觀察瀏覽器輸出
瀏覽器輸入 http://IP /css/??a.css,b.css
觀察瀏覽器輸出，出現下圖說明配置成功
由上圖看出，兩個css已經合并成功一個css
此步驟需要根據實際情況修改，本次試驗針對 javashop 多店系統
配置 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; } |
加粗部分根據實際情況修改
根據對應規則修改項目(修改完成后需要重新啟動nginx)
例如：
可根據實際情況修改。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
