在webpack工程里使用gulp实现指定文件上传

自动部署的意义

省时、省力、省心

配置环境以及包依赖

需要下载一个nodejs
需要全局安装webpack、gulp包

构建工程

1、在文件中初始化一个webpack工程

npm init 

2、安装包，这里只需要安装两个包

npm i gulp gulp-ssh -d

然后这个目录是这样的

3、 准备好gulp代码
先创建一个gulpfile.js文件，作为gulp容器

代码如下

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

const remotePath = '/usr/nginx/'; // 远程项目地址
const projectName = 'test'; // 远程项目名称
const uploadFile = './test/**', // 当前工程中需要上传的文件目录，目录名随便定义
 
// 需要上传到服务器的路径
const config =  {
      //   remotePath:'/usr/nginx/test',
      remotePath: remotePath + projectName, 
      ssh: {
        // 测试服务器地址
        host: 'xxx.xx.xx.xx',
        port: 22,
        username: 'root',
        password: 'password',
      },
      commands: [
        // 删除现有文件
        // `rm -rf /uer/nginx/test` ( 删除项目目录下所有文件 )
        'rm -rf ' + remotePath + projectName + '/*',
      ],
    },


const gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: config.ssh,
});

/**
 *上传前先删除服务器上现有文件
 */
gulp.task('execSSHDelete', () => {
  console.log('删除服务器上现有文件...');
  return gulpSSH
    .shell(config.commands, { filePath: 'log/commands-delete.log' })
    .pipe(gulp.dest('logs'));
});

/**
 * 发布代码
 */
gulp.task('publish', () => {
  console.log('开始上传文件到服务器...');
  // 将当前目录下的文件上传到指定服务器目录下
  return gulp.src([uploadFile]).pipe(gulpSSH.dest(config.remotePath));
});

/**
 * gulp自动化部署
 * gulp.series：按照顺序执行
 * 删除，发布
 */
gulp.task(
  'default',
  gulp.series('execSSHDelete', 'publish', done => {
    console.log('发布完毕...', 'http://' + config.ssh.host + ':8080');
    // Did you forget to signal async completion? 报错后需要调用done,以结束task
    done(); // 在不使用文件流的情况下，向task的函数里传入一个名叫done的回调函数，以结束task
  })
);

4、最后，在当前工程里shell窗口执行gulp命令即可上传

	gulp