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插件，配置起来也很方便，这段代码我放在./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
集成打包，同步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就行了