引言
在前端調試代碼里，代碼文件的上傳的是很重要的一環，弄得好對提高開發效率有不少幫助。平常我們開發調試代碼一般有幾種方式：1、本地修改、本地瀏覽器調試；2、本地修改代碼更新到遠程服務器去瀏覽器調試；3、遠程代碼本地修改，瀏覽器調試；4、遠程修改代碼，本地瀏覽器調試……。本文主要講述的是本地修改代碼、代碼更新到服務器然后到瀏覽器調試的這種方式。
一、本地修改，本地瀏覽器調試
這種方式在一些小的前端項目比較常見：一些節日、新聞專題等前端項目。這種開發方式對后端數據獲取要求不高，可以本地搭個服務器調試數據，或直接是寫靜態頁面、沒有后端數據。
二、本地修改代碼、更新到遠程服務器，本地瀏覽器調試
這種開發方式很常見，我們可以用常見的ftp工具把代碼更新到服務器上。這里有一個問題，如果我們頻繁的修改代碼，這種手動一次次更新代碼到服務器的方式是不是很累人？其實這里我們可以做地自動化一點，可以用一些更先進的工具幫助我們開發。下面介紹一下這些工具：
1、winscp（windows平台）
這個ftp(sftp)工具除了一般的文件上傳外還可以實時的監控文件的增、刪、修改等，自動把代碼上傳到設定的服務器。這個軟件支持按密碼、putty key方式連接服務器。
注：點擊圖中按鈕即可監控本地的文件變化。
2、webstorm、eclipse、aptana等IDE（windows、mac os）
這種大型IDE內置sftp功能或配置一些sftp插件，也可以實現監控當前項目下的文件變化而自動上傳文件到服務器，詳細的配置可搜索“IDE名字+sftp”獲得教程。
注：下圖是webstorm配置sftp的方法，可以很清楚看到webstorm的sftp也支持實時上傳文件
3、sublime text 2 的sftp插件（windows、mac os）
這種方式是我常用的方式，因為我喜歡輕量級的編輯器，而且跨平台，ST2可以很好的滿足我的需求。怎么安裝這個插件我就不介紹了，大家搜一下安裝吧，很簡單。
注:安裝好插件后直接右鍵項目，‘Map to Remote’后會彈出一個‘sftp-config.json’的文件要你配置，這個是配置服務器用戶名、密碼或key、遠程路徑等的文件，保存時會保存在這個項目的根目錄下。
打開一個該項目的文件，右鍵之可以看到我們可以做的一些操作。如下圖：
我們可以把常用的一些操作設定快捷鍵，這樣會很好的進行一些操作。常用的操作應該是同步該文件（Upload file）、上傳全部的文件（Upload Open files）、把文件添加到監控列表（Monitor File）。添加文件到監控列表時，ST2保存文件時會自動上傳改文件到服務器（在別的編輯器修改保存時也會同步，前提是你要把該文件添加到監控列表里）。當然這個插件也可以下載遠程的文件到本地修改，但是這個不詳談，有興趣的可以自己摸索。
下圖：這種開發方式構成了良性的流程，具有比較高效的效率
4、grunt+rsync（mac os）
grunt是基於nodejs的前端命令行構建根據，它可以基於任務式（task）的前端開發，壓縮代碼、合並文件、監控文件變化等都是其內置的常用的任務。這個工具可以實現跨平台的前端任務管理，壓縮代碼、合並文件等常用操作都有很好實現方式。grunt可以監控文件的變化而執行某個任務，於是用這個工具實現前端自動上傳也成為了可能。rsync是linux下基於ssh的文件同步工具，能實現文件備份、上傳等常見操作。由於nodejs可以調用shell，所以結合rsync理論上也可以實現文件的實時同步上傳。但是rsync的配置略復雜，且服務器端、本地都需要安裝、配置，所以不太適合普及。grunt監控文件變化的api（其實也就是nodejs的watchFile方法）其實效率也不夠好，在幾十個文件的項目還行，更多的文件就會導致內存飆升、初始化的速度也會比較慢。
三、遠程代碼本地修改，瀏覽器調試
這種方式主要是把遠程目錄掛載（mount directory）到本地硬盤，即“遠程硬盤”。這種方式簡單快速、適合較少的代碼文件的修改。缺點是無法把修改的文件自動同步到本地svn代碼分支、不可斷網編輯等。windows下的ExpanDrive、mac os下的MacFuse+sshfs等的客戶端都可實現類似的功能。或者前文提到的sublime text 2 的sftp插件等類似的編輯器插件也可以下載遠程目錄到本地修改，但有些不屬於掛載目錄，僅僅提供了遠程目錄的下載，並無法實時同步代碼文件，需要開發者另外的操作。
四、遠程修改代碼，本地瀏覽器調試
這種方法對於前端開發人員來說並不常用，因為這種開發方式並不夠高效、學習成本也高。前端開發人員登錄遠程服務器最常見的操作是改一些配置文件——但你夠極客、是個vim黨，你完全可以無視上面那段話……
==================================================
作者：hotcho
出處：http://www.cnblogs.com/cos2004/archive/2013/03/28/2987369.html
==================================================