利用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 实现前端打包自动上传服务器