文件结构下面是我本地开发项目的文件结构和部署在服务器上的文件结构，这样大家也可以直观的在以下路径找到对应的文件1.开发文件结构2.服务器文件结构gulpfile.js详解文件内容的解释我在上一篇文章中已经解释了gulp的安装和基本的API。需要补充gulp基础知识的同学欢迎观看。点这里输入vargulp=require('gulp')vardel=require('del')//删除文件和文件夹varexec=require('child_process').execvarGulpSSH=require('gulp-ssh')//sshservervarrunSequence=require('gulp-sequence')//顺序执行任务varremothost={config:{host:'192.168.22.179',//serverIPport:22,//serverportusername:'root',//服务器账号密码:'123456'//服务器密码},dir:{path:'/www/OfficeHelper/server'//服务器存放路径},rm:[`rm-rf/www/OfficeHelper/server/`,//rm-rf递归删除服务器文件夹下的所有文件],start:[`pm2/www/OfficeHelper/server/bin/www`//通过pm2启动服务器]}//创建gulpSSH将将以上remothost配置信息传入sshConfigvargulpSSH=newGulpSSH({ignoreErrors:false,sshConfig:remothost.config})//1.打包前端代码gulp.task('build:client',function(cb){exec('npmrunbuild',function(err){if(err)returncb(err)//returnerrorcb()//完成任务})})//2.删除views目录下的代码gulpon服务器端.task('clean:views',function(cb){returndel(['./server/views/**/*'],cb)//匹配server/views中的所有文件///3.复制dist到服务端视图目录gulp.task('copy:views',function(cb){returngulp.src('./dist/**/*').pipe(gulp.dest('./server/views'))})////4.压缩服务器代码这里发现这一步不是必须的，它只是压缩文件的功能//gulp.task('build:zipserver',function(cb){//returngulp.src('./server/**')//.pipe(zip('server.zip'))//.pipe(gulp.dest('./zipfiles)'))//})//5.先用代码删除服务器gulp.task('cleanSSH',function(cb){returngulpSSH.shell(remothost.rm)})//6.上传服务器gulp.task('uploadSSH',function(cb){returngulp.src('./server/**').pipe(gulpSSH.dest(remothost.dir.path))})//7.启动项目gulp.task('startSSH',function(cb){returngulpSSH.shell(remothost.start)})//8.这里我们创建两个task，update:server和update:client，分别按顺序更新前后端代码.gulp.task('更新：server',function(cb){runSequence('cleanSSH','uploadSSH','startSSH',cb);})gulp.task('update:client',function(cb){runSequence('build:client','clean:views','copy:views','update:server',cb);})按照以上步骤，执行gulpupdate:client自动更新部署vue+express项目到服务器。如果您对上述情况有任何疑问或建议，欢迎指出。感谢您的收看。
