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，所以只上传distdirectory不包括静态目录具体配置如下：/*yarnaddgulpgulp-ssh*/constgulp=require('gulp')constGulpSSH=require('gulp-ssh')//上传路径到服务器constremotePath='/home/wwwroot/default/hyan_weixin/public/pages/h5/2018/0125zaosangrenhe'constconfig={ssh:{//官方主机:'xx.xx.xx.xx',port:22,用户名:'root',密码:'xxxxxxxx'},remotePath:remotePath,命令:[//删除现有文件`rm-rf${remotePath}`]}letgulpSSH=newGulpSSH({ignoreErrors:false,sshConfig:config.ssh})/***在上传之前删除服务器上现有的文件...*/gulp.task('execSSH',()=>{console.log('删除服务器上的现有文件...')returngulpSSH.shell(config.commands,{filePath:'commands.log'}).pipe(gulp.dest('logs'))})/***上传文件到server*/gulp.task('deploy',['execSSH'],()=>{console.log('2s后，开始上传文件到服务器...')setTimeout(()=>{returngulp.src(['./dist/**','!./dist/static/**']).pipe(gulpSSH.dest(config.remotePath))},2000)})同步静态资源到我用的cdn自己开发的一个npm插件qiniu-qupload，配置起来也很方便。我把这段代码放在./scripts/cdn.js目录下。具体内容如下：constqiniuUploader=require('qiniu-qupload')constpath=require('path')constqnConf={"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":"nodebuild/dev-server.js","build":"nodebuild/build.js","deploy":"gulpdeploy","build-cdn-deploy":"npmrunbuild&&nodescripts/cdn.js&&npmrundeploy"}}然后执行npmrunbuild-cdn-直接部署
