本地自动打包提交部署gitee pages

2 篇文章 0 订阅
  • 安装依赖
pnpm install puppeteer -D
  • 创建一个打包提交脚本
# deploy.sh
npm run build

git add .

git commit -m "update"

git push origin master
  • 创建部署脚本
// publish.js
#! /usr/bin/env node
const puppeteer = require("puppeteer")

// 主要原理在于使用xpath获取html页面dom元素,脚本代替小手自动触发点击事件
async function giteeUpdate() {
  const browser = await puppeteer.launch({
    // 此处可以使用 false 有头模式进行调试, 调试完注释即可
    headless: false
  })
  const page = await browser.newPage()
  await page.goto("https://gitee.com/login")
  
  // 1. 获取账号input,自动输入
  let accountElements = await page.$x('//*[@id="user_login"]') 
  //  🚨需要设置为自己的gitee账户🚨
  await accountElements[0].type("你的账号")
  
  // 2. 获取密码input,自动输入
  let pwdElements = await page.$x('//*[@id="user_password"]')
  // 🚨需要设置自己的gitee密码🚨
  await pwdElements[0].type("你的密码")
  
  // 3. 获取登录按钮,触发点击事件
  let loginButtons = await page.$x('//*[@class="git-login-form-fields"]/div[4]/input')
  await loginButtons[0].click()
  
  // 4. 等待登录成功
  await page.waitForTimeout(1000)
  // 🚨需要设置自己的gitee pages页面🚨
  await page.goto("https://gitee.com/jaqi/jaqi.note/pages")
  
  // 5. 监听触发的确认弹框,并点击确认
  await page.on("dialog", async dialog => {
    console.log("确认更新")
    dialog.accept()
  })
  
  // 6. 点击更新按钮,并弹出确认弹窗
  let updateButtons = await page.$x('//*[@id="pages-branch"]/div[6]');
  await updateButtons[0].click()
  
  //7. 轮询并确认是否更新完毕
  while (true) {
    await page.waitForTimeout(15000);
    try {
      // 获取更新状态标签
      deploying = await page.$x('//*[@id="pages_deploying"]')
      if (deploying.length > 0) {
        console.log("更新中...")
      } else {
        console.log("更新完毕")
        break
      }
    } catch (error) {
      break
    }
  }
  await page.waitForTimeout(500)
  
  // 8.更新完毕,关闭浏览器
  browser.close()
}

giteeUpdate()

参考:自动更新gitee pages,使用node脚本(更新于2023/6/10)

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
引用中提到,构建Vue项目时,可以选择部署Gitee Pages上。如果你的项目是静态项目,只需要在Gitee项目导航栏中点击"服务 -> Gitee Pages"即可部署。而如果你的项目是Vue项目,需要在项目路径中添加一个`.spa`文件,然后修改一些配置。具体步骤如下: 1. 在项目路径中添加`.spa`文件,具体原理不清楚,可能是给Nginx做一个标识作用。 2. 修改`build.js`文件,将其中的`console.log`全部注释掉。 3. 修改`config/index.js`文件,将`assetsPublicPath`的值改为`./`或者你的项目名称加上`/`(例如`'/ltz/'`),解决JS访问不到的问题。 4. 在`build/utils.js`文件中添加`publicPath: '../../'`,解决CSS/字体找不到的问题。 5. 运行`npm run build`命令,得到`dist`文件夹。 6. 将`dist`文件夹中的文件上传到你的Gitee仓库中。 7. 点击项目导航栏中的"服务 -> Gitee Pages",开始构建。选择你的分支,如果只有一个分支,就选`master`。选择部署目录,填入`dist`。 8. 如果在构建后,发现`css/js/img`等文件报了404异常,可以参考第5步的二或三进行解决。123 #### 引用[.reference_title] - *1* *3* [使用Gitee Pages服务 搭建Vue项目](https://blog.csdn.net/LitongZero/article/details/88207833)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [github pages gitee pages 配置教程、更新教程(亲测有效),gitee pages 访问界面为空白,样式和js文件404...](https://blog.csdn.net/mrliucx/article/details/125574957)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值