一個命令完成[打包+同步七牛cdn+上傳服務器]

張春雷發布于2019-08-26 11:41 / 3283人閱讀

摘要：實現一個命令完成打包同步上傳服務器說明由于我們用的七牛云存儲，所以也是走的七牛，所以并不適用于其他的，但是思路可以借鑒打包打包目前我這邊用的是，網上已經有很多文章了，這里就不作過多闡述了，只是說一下這個參數，如果要做同步肯定是要配置這個參

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打包命令

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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