最近使用vue开发单页应用项目有点多,每次build完都要通过ftp上传到服务器很麻烦。作为一个懒到极致的程序员,能用代码来解决的事情一定用代码解决。

业务需求

vue项目构建完成后会在项目根目录生成一个dist/目录,只需要将该目录下的文件上传到服务器的web容器即可访问。我们要做的就是通过命令行将dist/目录下所有文件上传到服务器对应的目录下。

实现步骤

  1. 安装gulpgulp-sftp

    1
    $ npm i gulp gulp-sftp --save-dev
  2. 在项目根目录新建gulp配置文件gulpfile.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var gulp = require('gulp');
    var sftp = require('gulp-sftp');
    const sftpOption = {
    host: '120.77.221.25', // FTP主机地址
    auth: 'FTPServer1', // 下一步创建的 .ftppass 文件里面对应的授权方式
    remotePath: '/data/www/xxxx.com/', // FTP需要上传的位置
    }
    gulp.task('upload', function () {
    return gulp.src('dist/**')
    .pipe(sftp(sftpOption));
    });
  3. 创建gulp-sftp配置文件.ftppass

    为了保证ftp账号安全,将FTP账号密码配置放在单独的文件中,并添加至版本控制系统的禁用列表中

    1
    2
    3
    4
    5
    6
    {
    "FTPServer1": {
    "user": "root",
    "pass": "xxxxxxx"
    }
    }
  4. 至此我们可以使用gulp来执行定义的上传任务了

    1
    $ gulp upload

    执行命令后我们项目的dist目录下的所有文件都上传到服务器/data/www/xxxx.com/目录下了。

  5. 为了方便我们构建完成后自动上传可以在package.json中定义一个命令

    1
    2
    3
    4
    5
    {
    script: [
    "deploy": "node build/build.js && gulp upload"
    ]
    }

    这样我们就可以直接执行npm run deploy命令来编译并上传我们的vue应用了