在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