結合gulp完整FTP或者svn自動更新文件到服務器或者上傳svn 不侷限於前端

一鍵上傳FTP或者更新svn

一鍵上傳FTP/更新svn，主要是利用 gulp-sftp/node-svn-ultimate 結合gulp實現自動更新/上傳，若是有不一樣使用姿式的小夥伴請留言。

背景概述

我是一個前端開發， 可是怎麼部署老是一個避免不了的問題。目前個人測試/生產部署，依舊是須要本身上傳FTP/更新svn。這一步就略微麻煩。目前咱們這邊更新FTP的話，是利用Xftp工具找到對應目錄而後上傳上去。每一次就這樣就顯得略微煩躁，特別是須要對接微信部分功能的話，須要線上環境測試，須要頻繁打包而後上傳，因此就有了這部分功能。至於同步更新svn是由於發佈生產須要更新到svn，而後再經過Jenkins手動發佈，就順便把這部分也給弄了。至此，部署項目不管是測試/生產編譯後都會自動去它該去的地方。

FTP

上傳FTP這部分就很簡單了，不須要那麼多驗證，直接把文件上傳就能夠了，上代碼。 首先在項目下建立gulp文件，由於咱們走的任務都是經過gulp來作的。同時在項目上建立是爲了藉助它的package.json文件，來執行任務。

const gulp = require('gulp')
const sftp = require('gulp-sftp')

gulp.task('test', function () {
  return gulp.src('編譯以後的文件目錄') || dist
    .pipe(sftp({
      host: 'ip',
      user: 'user',
      pass: 'pass',
      port: port,
      remotePath: 服務器FTP文件存放目錄
    }))
})

修改package.json test的命令
"build:test": "vue-cli-service build --mode test && gulp test" 
重點就是後面的gulp test命令 這個時候編譯完以後就會執行gulp test 而後上傳到ftp。

複製代碼

改進

有一個比較明顯的問題，直接把用戶信息暴露在gulp文件內，原本是應該生成.ftppass配置文件，放置到服務器。而後直接訪問服務器。這樣就不會把帳號密碼直接暴露出來。

svn

svn這部分就比較麻煩，由於咱們須要在編譯以後把文件直接上傳到svn，在這個期間，咱們須要對對應目錄svn文件，須要作更新svn操做，須要批量操做文件，而後再add文件，到最後的commit文件，這一步我是直接縮成一步而後再編譯後直接處理。由於涉及到生產文件，必定要備份，不管成功與否至少能夠還原。

const sequence = require('run-sequence')
const svnUltimate = require('node-svn-ultimate')
const fs = require('fs')
const path = require('path')
const del = require('del')
const moment = require('moment')

const time = moment(new Date().getTime()).format('YYYYMMDD-HHmmss')
const DIST_PATH = '' // svn目錄
const PROJEC_NAME = '' || 'dist' // 項目目錄
const SVN_PATH = `${DIST_PATH}/${PROJEC_NAME}/`
const test = 'test'
const WHITE_LIST = ['.svn'] // 白名單
複製代碼

gulp更新svn文件任務

gulp.task('update', function () {
  return new Promise((resolve, reject) => {
    svnUltimate.commands.update(SVN_PATH, {
    }, function (err) {
      !err ? resolve(true) : reject(err)
    })
  })
})
複製代碼

gulp備份svn文件任務

gulp.task('backups', function () {
  if (!SVN_PATH) throw ReferenceError('SVN_PATH')
  const pagePath = `${DIST_PATH}/version/list-${time}`
  
  fs.mkdir(pagePath, { recursive: true }, (err) => {
    if (err) throw err
  })
  
  return gulp.src(`${SVN_PATH}/**/*`)
    .pipe(gulp.dest(pagePath))
})
複製代碼

gulp刪除本地文件任務

gulp.task('del', function () {
  const list = WHITE_LIST.map(item => `!${SVN_PATH}/${test}/${item}`)
  del([
    `${SVN_PATH}/${test}/*`,
    ...list
  ])
})
複製代碼

gulp 遷移編譯文件到本地svn文件目錄任務

gulp.task('copy', function () {
  return gulp.src(`./${PROJEC_NAME}/**/*`)
    .pipe(gulp.dest(`${SVN_PATH}/${test}`))
})
複製代碼

gulp 新增文件到svn任務

gulp.task('add', function () {
  return new Promise((resolve, reject) => {
    const list = fs.readdirSync(`${SVN_PATH}${test}/`).filter(item => !WHITE_LIST.includes(item)).map(item => path.join(`${SVN_PATH}${test}/`, item)) // 上傳更新列表
    if (!list.length) {
      throw ReferenceError('add的數據文件不能爲空')
    }
    return svnUltimate.commands.add(list, {
    }, function (err) {
      console.log(err, 'add')
      !err ? resolve(true) : reject(err)
    })
  })
})
複製代碼

gulp 提交任務到svn任務

gulp.task('commit', function () {
  return new Promise((resolve, reject) => {
    const list = fs.readdirSync(`${SVN_PATH}${test}/`).filter(item => !WHITE_LIST.includes(item)).map(item => path.join(`${SVN_PATH}${test}/`, item)) // 上傳更新列表
    if (!list.length) {
      throw ReferenceError('commit的數據文件不能爲空')
    }
    return svnUltimate.commands.commit(list, {
      msg: time
    }, function (err) {
      console.log(err, 'commit')
      !err ? resolve(true) : reject(err)
    })
  })
})
複製代碼

最後一步

gulp.task('prod', function (callback) {
  sequence('update', 'backups', 'del', 'copy', 'add', 'commit', callback)
})

複製代碼

修改package.json prod的命令 "build": "vue-cli-service build --mode && gulp prod" 重點就是後面的gulp prod命令 這個時候編譯完以後就會執行gulp prod 而後更新到svn。

改進

其實這一個gulp文件，是應該獨立成一個項目，而後須要更新到svn到項目都到這個項目下面，統一管理。這樣就更方便的管理到全部須要svn更新的項目。