移動互聯網的爆發以及響應式頁面的尷尬症，開發web和mobile項目成為了標配，當然實際情況下，會有更多的項目。 多項目開發對於前端來說是個很大的挑戰✦ 重覆，重覆的前端架構，重覆的前端依賴，重覆的工具函數等✦ 局限，不同後臺有不同的規則，“因地制宜”真難受，剛伺候好rails又突然來個php✦ 最 ...
移動互聯網的爆發以及響應式頁面的尷尬症，開發web和mobile項目成為了標配，當然實際情況下，會有更多的項目。
多項目開發對於前端來說是個很大的挑戰
✦ 重覆，重覆的前端架構，重覆的前端依賴，重覆的工具函數等
✦ 局限，不同後臺有不同的規則，“因地制宜”真難受，剛伺候好rails又突然來個php
✦ 最優，後臺工程做前端構建，總是顯得不夠“最優”。
所以，我們需要單獨抽離出前端開發項目，按照前端的方式來組織代碼，通過構建工具來對前端資源文件做最優處理
那麼新問題來了，如何管理這個快速迭代，頻繁更新的前端項目呢？
✦ 作為單獨的項目管理？
✦ 用git submodule or git subtree管理？
多個後臺項目：qdaily4_web/moible/app
前端項目：qdaily4_feboierplate
之前的開發模式
✦ 在qdaily4_feboierplate項目中修改前端代碼
✦ 構建qdaily4_feboierplate項目，輸出到qdaily4_web/mobile/app
✦ 提交qdaily4_feboierplate項目的改動
✦ 在qdaily4_web/mobile/app項目中修改後臺代碼
✦ 提交qdaily4_web/mobile/app項目的改動，其中包括qdaily4_feboierplate項目構建輸出的文件
這種開發模式解耦了前端項目和後臺項目，前端項目嚴格按照前端的代碼結構去組織代碼，能夠實現模塊化，按需載入，就近原則，圖片壓縮等功能。缺陷在於需要頻繁的切換項目提交代碼。
為瞭解決頻繁切換項目的問題，調研了git submodule和git subtree之後，選擇用git subtree來解決這個問題。
現在的開發模式
qdaily4_feboierplate作為qdaily4_web/mobile/app的子項目，別名appfe
✦ 在appfe項目中修改前端代碼
✦ 構建appfe項目，輸出到qdaily4_web/mobile/app
✦ 提交qdaily4_web/mobile/app項目的改動（也會記錄appfe項目的改動）
✦ 使用git subtree命令提交appfe的改動到qdaily4_feboierplate
引入git subtree之後，不再感覺是在開發兩個項目，不需要頻繁的切換項目提交代碼，只需要使用git subtree命令就可以實現qdaily4_feboierplate項目的雙向更新，快速開發。缺陷在於存在多個qdaily4_feboierplate項目的拷貝。
雙向更新
前端項目qdaily4_feboierplate是作為子git被包含到多個後臺項目中，我們通過git subtree pull & git subtree push實現qdaily4_feboierplate的雙向更新，對於不穩定且需要快速迭代的模塊代碼恰到好處。
利用git subtree來管理前端模塊項目和多個後臺環境項目，可以有效快捷的實現前端模塊項目快速開發，雙向更新，配合上前端構建系統，簡直爽翻了。
小技巧
git倉庫取別名
使用appfe作為[email protected]:qdaily/qdaily4_feboierplate倉庫的別名
✦ 直接命令行輸入：
git remote add appfe git@bitbucket.org:qdaily/qdaily4_feboierplate.git✦ 也可以通過配置.git/config文件：
[remote "appfe"]
url = git@bitbucket.org:qdaily/qdaily4_feboierplate
fetch = +refs/heads/*:refs/remotes/appfe/*git指令自定義
git subtree pull 和 git subtree push 是需要頻繁使用的命令，我們可以通過自定義來讓git指令更簡單更好記
✦ 直接命令行輸入
git subtree pull --prefix=appfe appfe master
git subtree push --prefix=appfe appfe master✦ 也可以配置.git/config讓git subtree的命令更簡單!：表示外部命令而不是git命令，相當於直接在shell中運行!後的組合命令。$1：表示shell傳進來的第一個參數，比如git stpull demo/xxx，那麼$1就是demo/xxx。:：組合命令尾部的:很神奇，沒有它，最後一個指令不會運行，所以它起到一個占位的作用。
第二版Tip：
✦ 可以看出，如果當前分支沒有stash的東西，這個組合命令會出現問題，還未想到解決方案，有瞭解的人可以留言指出。
// 第二版
// git stpull demo/xxx
// git stpush demo/xxx
[alias]
stpull = !git stash \
&& git subtree pull --prefix=appfe appfe $1 \
&& git stash pop \
&& :
stpush = !git stash \
&& git subtree push --prefix=appfe appfe $1 \
&& git stash pop \
&& :第三版Tip：
✦ 放棄了stash，讓用戶自己去處理stash相關的事情。
✦ 使用兩個參數，表示子項目目錄和分值名稱，這樣可以相容處理多個子項目，不同分支的情況。
✦ 使用git subtree split --rejoin，解決了每次提交都需要重頭遍歷commits耗時過長的問題。
✦ 每次git subtree push之前都先git subtree pull，是為瞭解決錯誤時機git subtree split導致push失敗。
✦ 初次運行時，遠端沒有demo/xxx分支，需要使用git subtree push -P appfe demo/xxx新建遠端分支。
// 第三版
// git stpull appfe demo/xxx
// git stpush appfe demo/xxx
[alias]
stpull = !git subtree pull --prefix=$1 appfe $2 \
&& :
stpush = !git subtree pull --prefix=$1 appfe $2 \
&& git subtree split --rejoin --prefix=$1 $2 \
&& git subtree push --prefix=$1 appfe $2 \
&& :自定義git指令對於一些常使用的長命令很有效，強烈建議使用！
學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！
