文件结构
以下是我的本地开发项目的文件结构和服务器上部署的文件结构,这样大家在下面的路径中也能直观的去找到对应的文件
1.开发文件结构
2.服务端文件结构
gulpfile.js
文件内容详解
关于gulp的安装和基本API我在之前的文章中有详解,欢迎需要补充gulp基础的同学观看。点击这里进入
var gulp = require('gulp')
var del = require('del') // 删除文件和文件夹
var exec = require('child_process').exec
var GulpSSH = require('gulp-ssh') // ssh服务器
var runSequence = require('gulp-sequence') // 按顺序执行任务
var remothost = {
config: {
host: '192.168.22.179', // 服务器IP
port: 22, // 服务器端口
username: 'root', // 服务器账号
password: '123456' // 服务器密码
},
dir: {
path: '/www/OfficeHelper/server' // 服务端server存放路径
},
rm: [
`rm -rf /www/OfficeHelper/server/`, // rm -rf 递归删除server文件夹下所有文件
],
start: [
`pm2 /www/OfficeHelper/server/bin/www` // 通过pm2启动server
]
}
// 创建gulpSSH 将以上remothost 配置信息传入sshConfig
var gulpSSH = new GulpSSH({
ignoreErrors: false,
sshConfig: remothost.config
})
// 1.打包前端代码
gulp.task('build:client', function (cb) {
exec('npm run build', function (err) {
if (err) return cb(err) // 返回 error
cb() // 完成 task
})
})
// 2. 删除server端views目录下的代码
gulp.task('clean:views', function (cb) {
return del(['./server/views/**/*'], cb) // 匹配server/views/内所有文件
})
// 3.copy dist 到 server端views目录下
gulp.task('copy:views', function (cb) {
return gulp.src('./dist/**/*')
.pipe(gulp.dest('./server/views'))
})
// // 4.压缩server代码 这里发现其实这一步没什么必要,仅仅是压缩文件的作用
// gulp.task('build:zipserver', function (cb) {
// return gulp.src('./server/**')
// .pipe(zip('server.zip'))
// .pipe(gulp.dest('./zipfiles'))
// })
// 5.删除服务器先有代码
gulp.task('cleanSSH', function (cb) {
return gulpSSH.shell(remothost.rm)
})
// 6.上传服务器
gulp.task('uploadSSH', function (cb) {
return gulp.src('./server/**')
.pipe(gulpSSH.dest(remothost.dir.path))
})
// 7.启动项目
gulp.task('startSSH', function (cb) {
return gulpSSH.shell(remothost.start)
})
// 8.这里我们将创建 update:server 和 update:client 两个任务来分别按顺序更新后端和前端代码
gulp.task('update:server', function(cb) {
runSequence('cleanSSH', 'uploadSSH', 'startSSH', cb);
})
gulp.task('update:client', function(cb) {
runSequence('build:client', 'clean:views', 'copy:views', 'update:server', cb);
})
根据以上步骤,执行gulp update:client
就可以自动完成更新部署vue+express项目至服务端了,若以上出现什么问题或者有什么建议欢迎小伙们们指出
谢谢观看
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。