sftp-uploader

sftpupload

引入

yarn add sftp-uploader
npm i sftp-uploader

简介

sftp-uploader 是一款基于 ssh2-sftp-client 封装的文件上传插件，通过监听webpack打包完成事件，可以实现将打包好的项目文件上传到指定的sftp服务器目录，支持集成为webpack插件或单独使用，支持自动创建上传目录。

配置

const path = require('path')
const sftpUploader = require('sftp-uploader')

const sftp = new sftpUploader({
          // 需要上传文件的目录
          dir: path.join(__dirname, 'dist/'),
          // 上传到的目录
          url: '******',
          // sftp地址
          host: '*****',
          // sftp端口
          port: '*****',
          // 账号
          username: '*****',
          // 密码
          password: '*****',
          // 延迟上传时间（毫秒），解决部分项目会触发多次打包完成的问题
          delay: 0,
          // 上传文件过滤器，可以过滤掉不需要的文件，返回false将不会上传该文件（可选）
          uploadFilter(file) => {
            return file.name.endsWith(.gz) ? true : false
          },
          // 删除文件过滤器，可以过滤掉不需要删除的文件，返回false将不会删除该文件（可选）
          deleteFilter(file) => {
            return file.name.endsWith(.gz) ? true : false
          },
          // 预览链接接地址（可选）
          previewPath: 'https://www.baidu.com'
        })

webpack中使用(vue项目为例)

// vue.config.js
module.exports = {
  configureWebpack: config => {
    return {
      plugins: [sftp]
    }
  }
}

使用

配合打包命令使用(webpack中)

1. 第一种方式直接在打包命令行后增加deploy参数即可， 如 npm run build deploy 或 yarn build deploy ， 即可在打包完成后自动上传。
2. 第二种方式使用scripts配置，在package.json中添加如下配置

// 通用 
"scripts": {
  "build": "vue-cli-service build --mode development",
  "deploy": "yarn build deploy"
}

// 或使用环境变量配置
// 1、window环境
"scripts": {
  "build": "vue-cli-service build --mode development",
  "deploy": "set UPLOAD=true && yarn build"
}
// 2、liunx or macos环境
"scripts": {
  "build": "vue-cli-service build --mode development",
  "deploy": "export UPLOAD=true && yarn build"
}
// 使用 yarn deploy 或 npm run deploy

单独项目上传文件

针对单独上传已经编译好的文件，不通过监听打包完毕命令上传，可直接在vue.config.js最后加上如下代码

// vue.config.js
// 没有process.env.NODE_ENV环境变量说明是单独运行
if (process.env.NODE_ENV === undefined) {
  sftp.put()
}

// 然后在项目根目录终端下运行如下命令
node vue.config.js

::: tip 以上两种情况可以并存 :::

上传任意项目

// 1、在项目中创建uploader.js
// 2、配置和webpack插件模式相同

sftp.put()
// 然后在项目根目录终端下运行如下命令
node uploader.js