使用Gulp更新部署vue+express项目至服务端

文件结构

以下是我的本地开发项目的文件结构和服务器上部署的文件结构，这样大家在下面的路径中也能直观的去找到对应的文件

1.开发文件结构

2.服务端文件结构

gulpfile.js文件内容详解

关于gulp的安装和基本API我在之前的文章中有详解，欢迎需要补充gulp基础的同学观看。点击这里进入

var gulp = require('gulp')
var del = require('del')                         // 删除文件和文件夹
var exec = require('child_process').exec
var GulpSSH = require('gulp-ssh')                // ssh服务器
var runSequence = require('gulp-sequence')       // 按顺序执行任务

var remothost = {
  config: {
    host: '192.168.22.179', // 服务器IP
    port: 22,               // 服务器端口
    username: 'root',       // 服务器账号
    password: '123456'      // 服务器密码
  },
  dir: {
    path: '/www/OfficeHelper/server'       // 服务端server存放路径
  },
  rm: [
    `rm -rf /www/OfficeHelper/server/`,    // rm -rf 递归删除server文件夹下所有文件
  ],
  start: [
    `pm2 /www/OfficeHelper/server/bin/www` // 通过pm2启动server
  ]
}

// 创建gulpSSH 将以上remothost 配置信息传入sshConfig
var gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: remothost.config
})

// 1.打包前端代码
gulp.task('build:client', function (cb) {
  exec('npm run build', function (err) {
    if (err) return cb(err) // 返回 error
    cb() // 完成 task
  })
})

// 2. 删除server端views目录下的代码
gulp.task('clean:views', function (cb) {
  return del(['./server/views/**/*'], cb) // 匹配server/views/内所有文件
})

// 3.copy dist 到 server端views目录下
gulp.task('copy:views', function (cb) {
  return gulp.src('./dist/**/*')
    .pipe(gulp.dest('./server/views'))
})

// // 4.压缩server代码   这里发现其实这一步没什么必要，仅仅是压缩文件的作用
// gulp.task('build:zipserver', function (cb) {
//   return gulp.src('./server/**')
//     .pipe(zip('server.zip'))
//     .pipe(gulp.dest('./zipfiles'))
// })

// 5.删除服务器先有代码
gulp.task('cleanSSH', function (cb) {
  return gulpSSH.shell(remothost.rm)
})

// 6.上传服务器
gulp.task('uploadSSH', function (cb) {
  return gulp.src('./server/**')
  .pipe(gulpSSH.dest(remothost.dir.path))
})

// 7.启动项目
gulp.task('startSSH', function (cb) {
  return gulpSSH.shell(remothost.start)
})

// 8.这里我们将创建 update:server 和 update:client 两个任务来分别按顺序更新后端和前端代码
gulp.task('update:server', function(cb) {  
    runSequence('cleanSSH', 'uploadSSH', 'startSSH', cb);
})
gulp.task('update:client', function(cb) {  
  runSequence('build:client', 'clean:views', 'copy:views', 'update:server', cb);
})

根据以上步骤，执行 gulp update:client就可以自动完成更新部署vue+express项目至服务端了，若以上出现什么问题或者有什么建议欢迎小伙们们指出
谢谢观看