一个命令完成[打包+同步七牛cdn+上传服务器]
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就行了
一个命令完成[打包+同步七牛cdn+上传服务器]的更多相关文章
- ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
- 七牛图片上传JSSDK
BASE64图片上传 接口说明: POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/ ...
- 两个七牛app上传小脚本
把要更新的app放到/home/data下面 安卓: cat upload_apk.sh #!/bin/bashUser=xxxxx@qq.comPass=xxxxxxqrsctl-v3.1.2016 ...
- 七牛文件上传-python
#!/usr/bin/env python # -*- coding: utf-8 -*- import sys import os from sevencow import CowException ...
- 七牛php上传下载类,集成官方文档的方法
<?phpuse Qiniu\Auth;use Qiniu\Storage\UploadManager;class qiniu{ public $_accesskey = null; publi ...
- 坑人的七牛CDN
最近七牛CDN不知道咋啦的,一下子就不行了,提示错误信息如下 "upload image source key fail: unexpected EOF" 找客服提交工单都没有解决 ...
- WordPress网站加速优化,一键免费使用七牛CDN插件
利用wordpress搭建网站是个人建站的主流方案,我曾分享过wordpress网站加速优化必做的十件事,帮助了不少个人站长.今天介绍帮助wordpress网站提升速度至少10倍的免费CDN加速插件: ...
- 图床工具PicGO实现七牛云图片上传
图床工具PicGO实现七牛云图片上传 我们在写博客或者网络文章时经常需要上传图片.目前最有名气的图床工具就是PicGO. 简单的界面,完整的功能,在相册里也能直接复制markdown图片链接.一直深受 ...
- 七牛云覆盖上传 php
使用七牛云过程中遇到了需要上传覆盖的情况,最终解决,分享给大家. 七牛云sdk上传示例中是这样写的 <?php require_once 'path_to_sdk/vendor/autoload ...
随机推荐
- npm cnpm yarn 安装
安装node.js,其中已经集成了npm,可以将npm切换到国内镜像 $ npm config set registry https://registry.npm.taobao.org -- 配置后可 ...
- js 数组/对象/日期的浅克隆
//封装 function clone (obj) { // Handle the 3 simple types, and null or undefined if (null == obj || & ...
- 积分图(三) - Boxfilter 的实现过程分析
Boxfilter 快速计算 它可以使复杂度为O(MN)的求和,求方差等运算降低到O(1)或近似于O(1)的复杂度,它的缺点是不支持多尺度. Boxfilter 的原理有点类似 Integral Im ...
- JZ-042-和为 S 的两个数字
和为 S 的两个数字 题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 返回值描述: 对应每个测试案例,输出两 ...
- 从ELF文件谈起
本文信息来源: 又是一期硬核内容:ELF文件格式 What's the difference of section and segment in ELF file format ELF Section ...
- java面试:java基础、Io、容器
1.java基础 1.JDK 和JRE有什么区别 JDK:java开发工具包,java开发运行环境.包含了JRE. JRE:java运行环境,包含java虚拟机,java基础类库. 2.jav ...
- git同步代码到另一分支
将dev分支的代码同步到master 方法一:用git命令 1.git checkout master 2.git merge dev 3.git push --set-upstream origin ...
- idea Mybatis mapper配置文件删除SQL语句背景色
原样式: 看着很不爽 本文 idea 版本为:idea 2020.3.1,以下操作均基于此版本进行 解决办法 1.去除警告 Settings>Editor>Inspections>S ...
- 【死磕NIO】— 跨进程文件锁:FileLock
大家好,我是大明哥,一个专注于[死磕 Java]系列创作的程序员. [死磕 Java ]系列为作者「chenssy」 倾情打造的 Java 系列文章,深入分析 Java 相关技术核心原理及源码 死磕 ...
- 遇到REMOTE HOST IDENTIFICATION HAS CHANGED怎么办?
今日遇到如下问题: 警告的大概意思就是,主机密钥发生变更,并提示安全风险(可能存在中间人攻击) 但是事实是,这是因为我重装系统之后遇到的问题.重装系统后,指纹当然会发生变化了...在Xshell实验中 ...