node.js实现gitee 码云一键更新文档pages

问题

• github的pages功能可以方便部署前端网页，可以实现git push 后一键更新文档，但github网速太感人
• 所以寻求国内码云gitee上来部署pages页面，但gitee的代码更新后网页没有实时更新，必须要手动点击按钮去更新，每次都要手动点击太麻烦。gitee官方提供的没有放开，有许多限制
• 最后通过puppeteer来实现自动化部署功能

目前写了一个nodejs插件

[@yck-web/update-gitee](https://www.npmjs.com/package/@yck-web/update-gitee)

具体实现思路如下

• 引入puppeteer ora

   const puppeteer=require("puppeteer")
   const ora=require("ora")
   const spinner = ora('正在运行中...').start();

   spinner.text = 'loading...';

• 新建一个无头浏览器

 const browser = await puppeteer.launch({
       headless: true,
       defaultViewport: {
           width: 1920,
           height: 1080,
       },
   })
   const page = await browser.newPage()
   clickAccept(page)//监听弹框，默认确认
   await page.goto("https://gitee.com/login")

• gitee登陆

       await page.goto("https://gitee.com/login")
       await page.waitForSelector("#user_login")
       await page.waitForSelector("#user_password")
       await page.type("#user_login", params.username);
       await page.type("#user_password", params.password);
       await page.click('input[type="submit"]')
       await page.waitForNavigation()
       console.log("登陆成功")

• 登陆成功后，跳转你的gitee项目里的pages更新页面，有更新按钮的那个页面

await page.goto("https://gitee.com/...xxx/...xxx/pages")
await page.waitForSelector(".button.update_deploy")
await page.click(".button.update_deploy")

• 前面写的clickAccept函数是为了监听dialog弹框所有弹框都默认点击同意

function clickAccept(page) {
    return new Promise(async resolve => {
        await page.on("dialog", async dialog => {
            await dialog.accept()
            resolve(true)
        })
    })
}

• 循环确认更新成功没有，成功后关闭浏览器

await page.waitForSelector(".ui.active.inline.loader.deploying_loading", page)
const isFalse = await isLoop(".ui.active.inline.loader.deploying_loading", page)//循环判断loding是否存在，不存在则更新成功
    if (!isFalse) {
        spinner.succeed("更新成功")
        // console.log("更新成功")
        await browser.close();
    }

• isLoop函数

function isLoop(selector, page) {
    return new Promise(async resolve => {
        setTimeout(async () => {
            const searchInputs = await page.$(selector);
            if (searchInputs) {
                resolve(isLoop(selector, page))
            } else {
                resolve(false)
            }
        }, 1000)
    })
}

至此结束，下次git push推送代码后就可以执行下一步命令直接更新gitee pages页面了，还是很方便的； npm插件地址@yck-web/update-gitee； 源码地址