利用Gulp實現前端打包自動上傳服務器

關於

• 因爲測試環境沒有使用例如:CI/CD,Jenkins等服務。因此在平時開發中，時不時都要打個包而後手動打開ftp工具將包上傳到測試服務器上,因此這裏想有沒有什麼腳本能夠實現打包完成自動上傳資源到測試服務器。

使用gulp實現

• 首先安裝gulp,gulp-ssh這兩個包

npm install gulp gulp-ssh -D

• 在項目根目錄下新建gulpfile.js文件

1. 刪除服務器上已經存在的文件夾

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

1. 打包上傳

gulp.task('deploy', gulp.series('execSSH', done => {
  console.log('2s後開始上傳文件到服務器...')
  setTimeout(() => {
    gulp.src(`./${npm_package_name}/**`)
    .pipe(gulpSSH.dest(config.remotePath))
    console.log('上傳完畢.....')
    done();
  }, 2000)
}))

注意在這裏遇到一個坑，若是使用的是gulp4以上版本，打包命令可按照上面的方法寫，若是是gulp4如下版本，按照下面的方法寫

gulp.task('deploy', ['execSSH'], () => {
   console.log('2s後開始上傳文件到服務器...')
   setTimeout(() => gulp.src(`./${npm_package_name}/**`)
     .pipe(gulpSSH.dest(config.remotePath)), 2000)
})

否則會遇到下面如圖的報錯：

這是由於在gulp4與gulp3中依賴任務列表寫法的改變，具體可看官方文檔 series()

還有一個點須要注意：若是出現如下報錯:

須要手動結束任務done();

完整代碼：

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

// eslint-disable-next-line @typescript-eslint/camelcase
const { APP_ENV, npm_package_name } = process.env;
const isProduct = APP_ENV === 'production';

// 須要上傳到服務器的路徑
// eslint-disable-next-line @typescript-eslint/camelcase
const remotePath = `/home/public/docker/main/${npm_package_name}`
const config = {
  ssh: { // 正式
    host: isProduct ? '' : '192.168.31.227',
    port: isProduct ? 22 : 8822,
    username: 'root',
    password: isProduct ? '' : 'a1234567',
  },
  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('deploy', gulp.series('execSSH', done => {
  console.log('2s後開始上傳文件到服務器...')
  setTimeout(() => {
    // eslint-disable-next-line @typescript-eslint/camelcase
    gulp.src(`./${npm_package_name}/**`)
    .pipe(gulpSSH.dest(config.remotePath))
    console.log('上傳完畢.....')
    done();
  }, 2000)
}))

修改package.json文件

• 修改scripts新增命令以下:

"scripts": {
    "start": "cross-env APP_ENV=development APP_TYPE=site MOCK=none umi dev",
    "start:no-mock": "cross-env MOCK=none umi dev",
    "build": "cross-env APP_ENV=production umi build",
    "build:test": "cross-env APP_ENV=test umi build",
    "analyze": "cross-env ANALYZE=1 umi build",
    "deploy:test": "npm run build:test && gulp deploy"
  },

使用

• 執行打包的時候運行

npm run deploy:test

這樣就會先去打包，而後將打包的文件上傳至服務器

總結

• 目前只是使用gulp簡單的實現了一下，若是想搭建完整的自動構建，打包，回滾，監控等能夠使用jetkins
• 本文首發於: 利用Gulp實現前端打包自動上傳服務器