如何用gulp打包并上传

1.首先要安装gulp插件

	npm install gulp
    npm install --save-dev gulp-ssh

2.然后在你的项目里面创建一个文件gulpfile.js

gulpfile.js代码如下：

   const gulp = require('gulp')
const GulpSSH = require('gulp-ssh')

// 需要上传到服务器的路径
const remotePath = 'xxxxxx'
const config = {
  ssh: {
    host: 'xxxxx', //服务器host
    port: 22, //服务器端口,这个不用改
    username: 'xxxx', //登陆服务器账号
    password: 'xxxxxx' //登陆服务器密码
  },
  remotePath,
  commands: [
    // 删除现有文件
    `rm -rf ${remotePath}`
  ]
}
const gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: config.ssh
})

/**
 * 上传前先删除服务器上现有文件...
 */
gulp.task('execSSH', () => {
  console.log('删除服务器上现有文件...')
  return gulpSSH.shell(config.commands, { filePath: 'commands.log' })
    .pipe(gulp.dest('logs'))
})

/**
 * 上传文件到服务器
 */
gulp.task('upload', () => {
  console.log('开始上传文件到服务器...')
  return gulp.src('./dist/**')
    .pipe(gulpSSH.dest(config.remotePath))
})

/**
 * 上传完成
 */
gulp.task('default', gulp.series('execSSH', 'upload', done => {
  console.log('上传完成，真香')
  done()
}))

在package.json中，添加如下命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint  --ext .js,.vue src",
    "lint-fix": "eslint --fix --ext .js,.vue src",
    "upload": "gulp",
    "deploy": "vue-cli-service build && gulp"
  },

然后在终端新建命令 npm run deploy就可以了.

效果如下：