一个命令完成[打包+同步七牛cdn+上传服务器]

张春雷发布于2019-08-26 11:41 / 3278人阅读

摘要：实现一个命令完成打包同步上传服务器说明由于我们用的七牛云存储，所以也是走的七牛，所以并不适用于其他的，但是思路可以借鉴打包打包目前我这边用的是，网上已经有很多文章了，这里就不作过多阐述了，只是说一下这个参数，如果要做同步肯定是要配置这个参

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就行了

GPU云服务器云服务器完成上传视频上传完成判断一个js加载完成 linux打包命令

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107364.html

Hybird-离线资源生成工具

摘要：为了满足以上需求，就需要制作打包脚本和工具，来满足正常的运维。离线资源生成工具离线资源的生成，我们提供了一个工具可以打包出增量和全量升级包。比如和需要统一成。目录背景离线资源生成工具前端协助背景由于线上乐刻客户端 App 第一次打开平台 H5 需要几秒的加载时间，这个体验对用户来说并不友好，为了让用户跳转 H5 和跳转到原生一样的用户体验，就需要把 H5 相关的离线资源...

siberiawolf 2019-06-27 16:37 评论0 收藏0
Hybird-离线资源生成工具

摘要：为了满足以上需求，就需要制作打包脚本和工具，来满足正常的运维。离线资源生成工具离线资源的生成，我们提供了一个工具可以打包出增量和全量升级包。比如和需要统一成。目录背景离线资源生成工具前端协助背景由于线上乐刻客户端 App 第一次打开平台 H5 需要几秒的加载时间，这个体验对用户来说并不友好，为了让用户跳转 H5 和跳转到原生一样的用户体验，就需要把 H5 相关的离线资源...

hedge_hog 2019-08-20 16:51 评论0 收藏0
Hybird-离线资源生成工具

摘要：为了满足以上需求，就需要制作打包脚本和工具，来满足正常的运维。离线资源生成工具离线资源的生成，我们提供了一个工具可以打包出增量和全量升级包。比如和需要统一成。目录背景离线资源生成工具前端协助背景由于线上乐刻客户端 App 第一次打开平台 H5 需要几秒的加载时间，这个体验对用户来说并不友好，为了让用户跳转 H5 和跳转到原生一样的用户体验，就需要把 H5 相关的离线资源...

J4ck_Chan 2019-08-01 16:54 评论0 收藏0
Webpack 项目优化杂记

摘要：入口文件打包出口地址在中可以配置我们的地址这里你要有一个七牛云的账户。特别像是七牛云这样拥有图片处理引擎的服务商，我们还可以通过来处理上传至的图片。本项目源码均可在这里找到。之前公司的官网项目静态文件都是放在静态服务器中，这其中的弊端就不赘述了。简单说一下 CDN 的好处: CDN 可以解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就...

incredible 2019-08-23 13:53 评论0 收藏0