使用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項目至服務端了，若以上出現什麼問題或者有什麼建議歡迎小夥們們指出 謝謝觀看