資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)一個(gè)命令完成打包同步上傳服務(wù)器說明由于我們用的七牛云存儲(chǔ)，所以也是走的七牛，所以并不適用于其他的，但是思路可以借鑒打包打包目前我這邊用的是，網(wǎng)上已經(jīng)有很多文章了，這里就不作過多闡述了，只是說一下這個(gè)參數(shù)，如果要做同步肯定是要配置這個(gè)參
webpack+gulp+qshell+npm-scripts實(shí)現(xiàn)一個(gè)命令完成[打包+同步cdn+上傳服務(wù)器]
說明由于我們用的七牛云存儲(chǔ)，所以cdn也是走的七牛，所以并不適用于其他的cdn，但是思路可以借鑒
打包打包目前我這邊用的是webpack，網(wǎng)上已經(jīng)有很多文章了，這里就不作過多闡述了，只是說一下publicPath這個(gè)參數(shù)，如果要做cdn同步肯定是要配置這個(gè)參數(shù)的，目前我是這樣配置的：
http://youCdnPath/${process.env.npm_package_name}/
上面的process.env.npm_package_name就是你packge.json里面的name字段
上傳資源到服務(wù)器這塊的實(shí)現(xiàn)我用的是gulp配合gulp-ssh來實(shí)現(xiàn)的，會(huì)先刪除現(xiàn)有文件然后上傳，不會(huì)由于文件指紋變動(dòng)導(dǎo)致文件的堆積，然后所有的靜態(tài)資源都走的cdn，所以，只上傳了dist目錄下不包括static目錄的文件，具體配置如下：
/*
yarn add gulp gulp-ssh
*/
const gulp = require("gulp")
const GulpSSH = require("gulp-ssh")
// 需要上傳到服務(wù)器的路徑
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: [
// 刪除現(xiàn)有文件
`rm -rf ${remotePath}`
]
}
let gulpSSH = new GulpSSH({
ignoreErrors: false,
sshConfig: config.ssh
})
/**
* 上傳前先刪除服務(wù)器上現(xiàn)有文件...
*/
gulp.task("execSSH", () => {
console.log("刪除服務(wù)器上現(xiàn)有文件...")
return gulpSSH.shell(config.commands, {filePath: "commands.log"})
.pipe(gulp.dest("logs"))
})
/**
* 上傳文件到服務(wù)器
*/
gulp.task("deploy", ["execSSH"], () => {
console.log("2s后開始上傳文件到服務(wù)器...")
setTimeout(() => {
return gulp.src(["./dist/**", "!./dist/static/**"])
.pipe(gulpSSH.dest(config.remotePath))
}, 2000)
})
同步靜態(tài)資源到cdn
這塊用的到是我自己開發(fā)的一個(gè)npm插件qiniu-qupload，配置起來也很方便，這段代碼我放在./scripts/cdn.js目錄下，具體內(nèi)容如下：
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)
把上面對(duì)應(yīng)的字段換成你自己的七牛的配置就行了，一般這些參數(shù)就可以了，另外，需要特別說明一下src_dir這個(gè)參數(shù)，mac和windows不一樣，上面的為windows平臺(tái)的示例，mac應(yīng)該為path.resolve(process.cwd(), "./test")但是我沒驗(yàn)證，具體說明和其他完整的配置參數(shù)可參考qshell-qupload官方文檔
注意：qiniu-qupload插件依賴于七牛的命令行工具qshell，所以需要先安裝qshell 集成打包，同步cdn，上傳服務(wù)器為一個(gè)命令這一步就比較簡單了，直接在package.json里面的scripts字段加個(gè)命令就行了，具體如下：
{
"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"
}
}
然后直接執(zhí)行npm run build-cdn-deploy就行了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107364.html
摘要：為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運(yùn)維。離線資源生成工具離線資源的生成，我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線資源生成工具 前端協(xié)助 背景 由于線上樂刻客戶端 App 第一次打開平臺(tái) H5 需要幾秒的加載時(shí)間，這個(gè)體驗(yàn)對(duì)用戶來說并不友好，為了讓用戶跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶體驗(yàn)，就需要把 H5 相關(guān)的離線資源...
摘要：為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運(yùn)維。離線資源生成工具離線資源的生成，我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線資源生成工具 前端協(xié)助 背景 由于線上樂刻客戶端 App 第一次打開平臺(tái) H5 需要幾秒的加載時(shí)間，這個(gè)體驗(yàn)對(duì)用戶來說并不友好，為了讓用戶跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶體驗(yàn)，就需要把 H5 相關(guān)的離線資源...
摘要：為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運(yùn)維。離線資源生成工具離線資源的生成，我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線資源生成工具 前端協(xié)助 背景 由于線上樂刻客戶端 App 第一次打開平臺(tái) H5 需要幾秒的加載時(shí)間，這個(gè)體驗(yàn)對(duì)用戶來說并不友好，為了讓用戶跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶體驗(yàn)，就需要把 H5 相關(guān)的離線資源...
摘要：入口文件打包出口地址在中可以配置我們的地址這里你要有一個(gè)七牛云的賬戶。特別像是七牛云這樣擁有圖片處理引擎的服務(wù)商，我們還可以通過來處理上傳至的圖片。 本項(xiàng)目源碼均可在 這里 找到。 之前公司的官網(wǎng)項(xiàng)目靜態(tài)文件都是放在靜態(tài)服務(wù)器中，這其中的弊端就不贅述了。簡單說一下 CDN 的好處: CDN 可以解決因分布、帶寬、服務(wù)器性能帶來的訪問延遲問題，適用于站點(diǎn)加速、點(diǎn)播、直播等場景。使用戶可就...
閱讀 1663·2021-09-23 11:31
閱讀 955·2021-09-23 11:22
閱讀 1390·2021-09-22 15:41
閱讀 4115·2021-09-03 10:28
閱讀 2943·2019-08-30 15:55
閱讀 3571·2019-08-30 15:55
閱讀 2006·2019-08-30 15:44
閱讀 2743·2019-08-30 13:50
