使用Gulp-Rsync部署前端项目 | 前端

Posted 2021-04-08 日拱一卒

一般情况下，当需要在服务器和开发环境之间交换文件的时候，我们会采用nc和scp这样的工具，但当遇到部署代码这种传输大块文件，且是周期性工作时，前面两个工具就变得不那么适用了。这时你应该尝试一下rsync这款增量同步数据的命令行工具。

rsync命令提供了3种不同的传输方式，但我们只使用其中的SSH方式，我们要做的是把我们在开发环境中完成的静态html文件以及动态编译生成的CSS和JS文件传输到服务器上。

Gulp-Rsync 安装和部署

因为我们是在gulp基础上做部署，所以你首先要确保你的gulp已经正确安装，之后再安装gulp-rsync，执行npm install gulp-rsync --save-dev 安装即可。

var gulp = require('gulp');
var rsync = require('gulp-rsync');

gulp.task('deploy', function() {
  gulp.src('build/**')
    .pipe(rsync({
      root: 'build',
      hostname: 'example.com',
      destination: '/path/to/site'
    }));
});

• username 登陆到服务器的用户名

• shell 默认情况rsync的传输方式是ssh，但如果你是本地，你可以把这个参数设置为rsh

• port 指定ssh端口号

• incremental 设置为true后rsync只会进行增量传输，默认为false

• progress 设置为true会在控制台显示每个文件的传输进度

• relative 默认情况gulp-rsync会传输root参数指定的文件夹下的所有路径文件，如果你只要传输其中的部分文件，可以指定relative参数为false

• compress 设置为true会压缩传输

• recursive 设置为true后，rsync会递归的传输root下的所有目录下的文件及子目录下文件，但如果你是gulp.src()指定的文件可以不加此参数

• include，exclude 表示传输不包含哪些文件和包含哪些文件,接受数组或字符串

• clean，设置为true后传输完文件后，自动删除本地文件，需要与recursive一起使用

-完-

你还可以看：

参考引用