一个命令完成[打包+同步七牛cdn+上传服务器]
2021-03-12 16:29
webpack+gulp+qshell+npm-scripts实现一个命令完成[打包+同步cdn+上传服务器]
说明
由于我们用的七牛云存储,所以cdn也是走的七牛,所以并不适用于其他的cdn,但是思路可以借鉴
打包
打包目前我这边用的是webpack,网上已经有很多文章了,这里就不作过多阐述了,只是说一下publicPath这个参数,如果要做cdn同步肯定是要配置这个参数的,目前我是这样配置的:
http://youCdnPath/${process.env.npm_package_name}/
上面的process.env.npm_package_name就是你packge.json里面的name字段
上传资源到服务器
这块的实现我用的是gulp配合gulp-ssh来实现的,会先删除现有文件然后上传,不会由于文件指纹变动导致文件的堆积,然后所有的静态资源都走的cdn,所以,只上传了dist目录下不包括static目录的文件,具体配置如下:
/*
yarn add gulp gulp-ssh
*/
const gulp = require(‘gulp‘)
const GulpSSH = require(‘gulp-ssh‘)
// 需要上传到服务器的路径
const remotePath = ‘/home/wwwroot/default/hyan_weixin/public/pages/h5/2018/0125zaosangrenhe‘
const config = {
ssh: { // 正式
host: ‘xx.xx.xx.xx‘,
port: 22,
username: ‘root‘,
password: ‘xxxxxxxx‘
},
remotePath: remotePath,
commands: [
// 删除现有文件
`rm -rf ${remotePath}`
]
}
let 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‘, [‘execSSH‘], () => {
console.log(‘2s后开始上传文件到服务器...‘)
setTimeout(() => {
return gulp.src([‘./dist/**‘, ‘!./dist/static/**‘])
.pipe(gulpSSH.dest(config.remotePath))
}, 2000)
})
同步静态资源到cdn
这块用的到是我自己开发的一个npm插件qiniu-qupload,配置起来也很方便,这段代码我放在./scripts/cdn.js目录下,具体内容如下:
const qiniuUploader = require(‘qiniu-qupload‘)
const path = require(‘path‘)
const qnConf = {
"ak" : "youAK",
"sk" : "youSK",
"src_dir" : `${path.resolve(process.cwd(), ‘./dist/static‘).replace(/\\/g, ‘\\‘)}`,
"bucket" : "youBucket",
"key_prefix" : "11test/static/",
"overwrite" : true,
"rescan_local" : true,
"log_file" : "qnupload.log",
"file_type" : 0
}
qiniuUploader(qnConf)
把上面对应的字段换成你自己的七牛的配置就行了,一般这些参数就可以了,另外,需要特别说明一下src_dir这个参数,mac和windows不一样,上面的为windows平台的示例,mac应该为path.resolve(process.cwd(), ‘./test‘)但是我没验证,具体说明和其他完整的配置参数可参考qshell-qupload官方文档
注意:qiniu-qupload插件依赖于七牛的命令行工具qshell,所以需要先安装qshell
集成打包,同步cdn,上传服务器为一个命令
这一步就比较简单了,直接在package.json里面的scripts字段加个命令就行了,具体如下:
{
"name": "11test",
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"deploy": "gulp deploy",
"build-cdn-deploy": "npm run build && node scripts/cdn.js && npm run deploy"
}
}
然后直接执行npm run build-cdn-deploy就行了