说说前端开发中代码文件的上传

引言

在前端调试代码里，代码文件的上传的是很重要的一环，弄得好对提高开发效率有不少帮助。平常我们开发调试代码一般有几种方式：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插件等类似的编辑器插件也可以下载远程目录到本地修改，但有些不属于挂载目录，仅仅提供了远程目录的下载，并无法实时同步代码文件，需要开发者另外的操作。