利用Gulp实现前端打包自动上传服务器

w候人兮猗

发布于 2020-07-01 15:28:25

1.6K0

发布于 2020-07-01 15:28:25

文章被收录于专栏：w候人兮猗的博客w候人兮猗的博客

Contents

关于

由于测试环境没有使用例如:CI/CD,Jenkins等服务。所以在平时开发中，时不时都要打个包然后手动打开ftp工具将包上传到测试服务器上,所以这里想有没有什么脚本可以实现打包完成自动上传资源到测试服务器。

使用`gulp`实现

首先安装gulp,gulp-ssh这两个包

 npm install gulp gulp-ssh -D

在项目根目录下新建gulpfile.js文件
删除服务器上已经存在的文件夹

/**
 * 上传前先删除服务器上现有文件...
 */
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(() => {
    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"
  },