element框架中 利用node 一键部署静态资源到 七牛

2018-06-19 10:46:51   前端

  element   node   一键部署   静态资源   七牛  

利用node.js 一键部署七牛

前期准备 环境配置

element

node (我的版本 v8.11.2)

npm (我的版本 v6.1.0)


npm 组件包 colors、qiniu

node 的方法 fs、path、readline、console


说明

readline 用于从可读流(如 process.stdin)读取数据,每次读取一行文档说明

colors 设置在控制台中颜色和样式风格 文档说明

fs 文件系统操作 文档说明

console 模块提供了一个简单的调试控制台,类似于 Web 浏览器提供的 JavaScript 控制台。 文档说明

path 模块提供了一些工具函数,用于处理文件与目录的路径 文档说明

qiniu 适用于Node.js的Qiniu云SDK 文档说明


除了qiniu 其他包已默认安装
执行命令
  1. npm install qiniu

大体思路

上传
  1. 利用node的文件处理机制, 拿到指定目录下的所有文件,通过qiniuSDk一键上传到七牛云存储
批量更新
  1. 利用 qiniuSDK 获取远程指定筒和某前缀下的文件列表 批量删除后 再将本地文件全部上传

具体实现

创建 qiniu.js 文件

1.引入所需依赖

  1. const readline = require('readline')
  2. const colors = require( "colors");
  3. const FS = require('fs')
  4. const Join = require('path').join // 路径片段连接到一起,并规范化生成的路径
  5. const QiNiu = require('qiniu')

2.初始化配置

七牛秘钥

  1. const accessKey = '*******'; // 七牛秘钥
  2. const secretKey = '*******'; // 七牛秘钥
  3. const bucket = '***' // 七牛空间名(筒名)
  4. const prefix = '***' // 七牛目录名称(前缀)
  5. const limit = 10 // 分页请求 每页数量
  6. var uploadNore = ['index.html'] // 忽略文件数组(可以为文件或文件夹)忽略文件数组(可以为文件或文件夹)
  7. // 鉴权对象
  8. const mac = new QiNiu.auth.digest.Mac(accessKey, secretKey);
  9. // 获取七牛配置
  10. const config = new QiNiu.conf.Config();
  11. // 是否使用https域名
  12. // config.useHttpsDomain = true;
  13. // 上传是否使用cdn加速
  14. // config.useCdnDomain = true;
  15. // 空间对应的机房 Zone_z0(华东)
  16. config.zone = QiNiu.zone.Zone_z0;
  17. // 资源管理相关的操作首先要构建BucketManager对象
  18. const bucketManager = new QiNiu.rs.BucketManager(mac, config);
  19. // 相关颜色配置 console颜色主题
  20. colors.setTheme({
  21. silly: 'rainbow',
  22. input: 'grey',
  23. verbose: 'cyan',
  24. prompt: 'grey',
  25. info: 'green',
  26. data: 'grey',
  27. help: 'cyan',
  28. warn: 'yellow',
  29. debug: 'blue',
  30. error: 'red'
  31. });
  32. //

3.定义相关方法

3.1 获取远程七牛 指定空间名和前缀名的

  1. // 这里采用异步方法操作 获取远程列表的目的只是为了删除 但只能是获取到列表后 回调里再删除
  2. // 获取远程七牛 指定前缀 文件列表
  3. async function getQiniuList() {
  4. var options = {
  5. limit: limit,
  6. prefix: prefix,
  7. }
  8. var array = []
  9. var list = await getList()
  10. // marker 上一次列举返回的位置标记,作为本次列举的起点信息
  11. async function getList(mark=false) {
  12. if(mark){
  13. var options = {
  14. limit: options.limit,
  15. prefix: options.prefix,
  16. mark: mark
  17. }
  18. }
  19. return new Promise(function(resolve, reject){
  20. bucketManager.listPrefix(bucket, options, function(err, respBody, respInfo) {
  21. if (err) {
  22. console.log(err);
  23. throw err;
  24. }
  25. if (respInfo.statusCode == 200) {
  26. //如果这个nextMarker不为空,那么还有未列举完毕的文件列表,下次调用listPrefix的时候,指定options里面的marker为这个值
  27. var nextMarker = respBody.marker;
  28. var commonPrefixes = respBody.commonPrefixes;
  29. var items = respBody.items;
  30. items.forEach(function(item) {
  31. array.push(QiNiu.rs.deleteOp(bucket, item.key))
  32. });
  33. if(respBody.marker){
  34. getList(respBody.marker)
  35. } else{
  36. resolve(array)
  37. }
  38. } else {
  39. console.log(respInfo.statusCode);
  40. console.log(respBody);
  41. }
  42. });
  43. })
  44. }
  45. return list
  46. }

3.2 删除远程 七牛列表数据

  1. // 批量删除远程七牛 指定列表 所有文件
  2. async function delAll(){
  3. async function delQiniuAll() {
  4. return new Promise(function(resolve, reject){
  5. // 获取七牛远程列表数据
  6. getQiniuList().then(res => {
  7. if (res.length!==0){
  8. console.log('远程列表为空'.debug);
  9. del(res, resolve)
  10. } else {
  11. resolve()
  12. }
  13. })
  14. })
  15. }
  16. await delQiniuAll()
  17. }
  18. function del(deleteOperations, resolve) {
  19. bucketManager.batch(deleteOperations, function(err, respBody, respInfo) {
  20. if (err) {
  21. console.log(err);
  22. //throw err;
  23. } else {
  24. // 200 is success, 298 is part success
  25. if (parseInt(respInfo.statusCode / 100) == 2) {
  26. respBody.forEach(function(item, index) {
  27. if (item.code == 200) {
  28. resolve(index)
  29. console.log('删除成功'+'第'+(parseInt(index)+1)+'个文件'.info)
  30. } else {
  31. console.log('删除失败'.error);
  32. console.log(item.code + "\t" + item.data.error.error);
  33. resolve(index)
  34. }
  35. });
  36. } else {
  37. console.log(respInfo.deleteusCode);
  38. console.log(respBody);
  39. }
  40. }
  41. });
  42. }

3.3 上传本地 文件到七牛

  1. // 上传所有文件到骑牛
  2. function upAllToQiniu(){
  3. console.log('开时删除七牛远程资源列表'.debug);
  4. // 先删除所有 再上传
  5. delAll().then(res => {
  6. console.log('开时上传资源到七牛'.debug);
  7. var files = FS.readdirSync('dist/'); // 文件目录
  8. var localFile = findSync('dist/')
  9. // key 为远程 七牛目录文件名
  10. // localFile[key] 为本地完成路径+文件名称
  11. for(var key in localFile){
  12. upOneToQiniu(localFile[key], key)
  13. }
  14. })
  15. }
  16. // 上传单文件到骑牛 localFile为本地完成路径+文件名称 key为远程 七牛目录文件名
  17. function upOneToQiniu(localFile, key) {
  18. var mac = new QiNiu.auth.digest.Mac(accessKey, secretKey);
  19. var options = {
  20. scope: bucket,
  21. };
  22. var putPolicy = new QiNiu.rs.PutPolicy(options);
  23. var uploadToken = putPolicy.uploadToken(mac);
  24. var formUploader = new QiNiu.form_up.FormUploader(config)
  25. var putExtra = new QiNiu.form_up.PutExtra()
  26. // 文件上传
  27. formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr,
  28. respBody, respInfo) {
  29. if (respErr) {
  30. throw respErr
  31. }
  32. if (respInfo.statusCode == 200) {
  33. console.log(localFile.info+'=>'+respBody.key.info + '上传成功')
  34. } else {
  35. console.log('上传失败' + respInfo.statusCode.error);
  36. console.log('上传失败' + respBody.error)
  37. }
  38. })
  39. }
  40. // 拿到文件 目录路径 startPath 根目录名称
  41. function findSync(startPath) {
  42. let targetObj={};
  43. function finder(path) {
  44. // 获取当前目录下的 文件或文件夹
  45. let files=FS.readdirSync(path);
  46. // 循环获 当前目录下的所有文件
  47. files.forEach((val,index) => {
  48. let fPath=Join(path,val);
  49. let stats=FS.statSync(fPath);
  50. if(stats.isDirectory()) {
  51. finder(fPath);
  52. }
  53. if(stats.isFile() && isNore(fPath)) {
  54. targetObj[fPath.replace(startPath, prefix)] = fPath;
  55. }
  56. });
  57. }
  58. finder(startPath);
  59. return targetObj;
  60. }
  61. /**
  62. * 判断当前路径是否在忽略文件数组中
  63. * @param {String} path 路径
  64. */
  65. function isNore(path) {
  66. for( var item of uploadNore) { // 遍历忽略数组
  67. if (path.indexOf(item) !== -1) {
  68. return false
  69. }
  70. }
  71. return true
  72. }

4.流程控制

  1. // process 对象是一个全局变量,它提供当前 Node.js 进程的有关信息,以及控制当前 Node.js 进程 因为是全局变量,所以无需使用 require()。
  2. var rl = readline.createInterface({
  3. input: process.stdin, // 要监听的可读流
  4. output: process.stdout, // 要写入逐行读取数据的可写流
  5. prompt: ('是否进行远程部署> (Y/N)').warn
  6. });
  7. rl.prompt();
  8. // 每当 input 流接收到接收行结束符(\n、\r 或 \r\n)时触发 'line' 事件。 通常发生在用户按下 <Enter> 键或 <Return> 键。监听器函数被调用时会带上一个包含接收的那一行输入的字符串。
  9. rl.on('line', (line) => {
  10. switch (line.trim()) {
  11. case 'y':
  12. case 'Y':
  13. console.log('开始执行远程部署'.help);
  14. // 上传
  15. upAllToQiniu()
  16. rl.close();
  17. break;
  18. case 'n':
  19. case 'N':
  20. console.log('您取消了远程部署'.help);
  21. rl.close();
  22. break;
  23. default:
  24. console.log(`你输入的:'${line.trim()}'为无效命令,请重新输入`.warn);
  25. rl.prompt();
  26. break;
  27. }
  28. })

最后 在终端里 执行 node build/qiniu.js
或者 在 package.json scripts项 里 加入

  1. "qiniu": "node build/qiniu.js",

然后执行 npm run qiniu 也可以

本文为作者原创,允许转载,转载后请以链接形式说明文章出处. 如转载但不标明来源,后果自负。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

感谢你的支持,我会继续努力!
扫码打赏,建议金额1-10元