Gulp自动更新gitee的pages服务

标签: 无 分类: 未分类 创建时间:2021-01-02 12:00:47 更新时间:2025-01-17 10:39:22

创建的gitee主页服务,使用hexo打包部署,将博客部署到gitee之后,github都能自动更新了,但是gitee却没有办法自动更新,原来对非付费用户,还是有限制的,就是没有自动更新选项,要手动设置进行更新。

参考文章:
1.Hexo托管到Coding;Hexo同时部署到多个平台 (这里的第二种方式没有测试成功)
2.hexo干货系列:(四)将hexo博客同时托管到github和coding (这里还部署到了coding上)
3.脚本解决 gitee-page 无法自动更新 (这里提到了gitee无法自动更新的问题,以及如何解决,主要就是解决了借助于puppeteer进行了登陆,以及更新按钮点击事件的模拟)
4.yanglbme/gitee-pages-action
5.码云gitee搭建hexo博客,push上去之后,page为什么不能自动更新,得手动更新page? (有人写了自动化的脚本执行更新命令,不过是java的脚本)
6.自动更新 Gitee Pages ( 这里我第一次听说了PlayWright这个项目,Selenium -> Puppeteer -> PlayWright,应该是从 Google 的 Puppeteer 转到 Microsoft PlayWright)

1.安装puppeteer

有些人借助于puppeteer编写了一个自动化的脚本。但是使用puppeteer,也有很多的缺点,第一个就是体积的问题,每一次安装puppeteer,都会下载一个chromium内核,如果有多个应用,那不就是有多个内核了吗?而且,使用puppeteer,还需要配置环境变量,这样在Windows上和linux上以及MacOS上移植显得似乎不太那么方便。还有就是直接安装,运行,也会出现各种问题,比如我安装了puppeteer,就可能运行不起来。如果最后安装成功puppeteer,就可以使用puppeteer进行模拟点击事件进行自动更新了。安装成功的标志,其实就是在.local-chromium下有解压缩出来的chromium文件。

1
2
"puppeteer": "^5.5.0",
"puppeteer-core": "^5.5.0"

2.编写更新代码

成功安装puppeteer之后,就可以进行代码编写了,这是网上的人写的代码(脚本解决 gitee-page 无法自动更新),主要就是借助了puppeteer进行的模拟点击事件等内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const puppeteer = require('puppeteer'); 

async function giteeUpdate(username,password,pages) {
const browser = await puppeteer.launch({
// 此处可以使用 false 有头模式进行调试, 调试完注释即可
headless: false,
});
const page = await browser.newPage();
await page.goto('https://gitee.com/login');
// 1. 选中账号控件
let accountElements = await page.$x('//*[@id="user_login"]') // 此处使用 xpath 寻找控件,下同
// 2. 填入账号
await accountElements[0].type(username)
// 3. 选中密码控件
let pwdElements = await page.$x('//*[@id="user_password"]')
// 4. 填入密码
await pwdElements[0].type(password)
// 5. 点击登录
let loginButtons = await page.$x('//*[@id="new_user"]/div[2]/div/div/div[4]/input')
await loginButtons[0].click()
// 6. 等待登录成功
await page.waitFor(1000)
await page.goto(pages); // 比如: https://gitee.com/yang0033/hexo-blog/pages
// 7.1. 监听步骤 7 中触发的确认弹框,并点击确认
await page.on('dialog', async dialog => {
console.log('确认更新')
dialog.accept();
})
// 7. 点击更新按钮,并弹出确认弹窗
let updateButtons = await page.$x('//*[@id="pages-branch"]/div[7]')
await updateButtons[0].click()
// 8. 轮询并确认是否更新完毕
while (true) {
await page.waitFor(2000)
try {
// 8.1 获取更新状态标签
deploying = await page.$x('//*[@id="pages_deploying"]')
if (deploying.length > 0) {
console.log('更新中...')
} else {
console.log('更新完毕')
break;
}
} catch (error) {
break;
}
}
await page.waitFor(500);
// 10.更新完毕,关闭浏览器
browser.close();
}
module.exports=giteeUpdate;
参考文章:
1.优雅地安装 Puppeteer (提供了一种使用共享的chromium内核方法,也就是指定chromium安装路径,所有的puppeteer都使用这个路径进行调试)
2.国内下载安装 Puppeteer 的方法 (如何加速puppeteer下载,包括安装puppeteer-cn等方法)
3.Puppeteer API v5.2.1 (这是puppeteer相关的API接口)
4.Puppeteer 安装失败的解决办法
5.手动下载 Chrome,解决 puppeteer 无法使用问题 (使用手动下载解压缩的方式,解决npm安装puppeteer无法运行的问题)

Error: Could not find browser revision 818858.

使用puppetter时出现:Run “PUPPETEER_PRODUCT=firefox npm install” or “PUPPETEER_PRODUCT=firefox yarn install” to download a supported Firefox browser binary.这其实有可能是因为没有下载完成puppeteer所导致的,在使用cnpm 进行安装的时候,还是要等到chromium下载完成才可以。

下载完成的标志就是 node_modules/_puppeteer@5.5.0@puppeteer/.local-chromium 文件夹下,有相应的chromium版本,我这里的版本是mac-818858,可以看到下载完成的chromium已经解压了。

参考文章:
1.puppeteer运行出现,Could not find browser revision 809590. (这里使用了browserFetcher.download(“809590”)进行问题的解决,但是我使用这个脚本的时候,会将下载的chromium下载到不知道的位置,无法控制)
2.Could not find browser revision 809590
3.使用Requests模拟post请求自动构建Gitee pages服务 (这个是python模拟的post请求进行的提交)
3.nodejs使用request发送post请求
5.puppetter安装就踩坑-解决篇 (puppetter使用方法)
6.class: BrowserFetcher (这是BrowserFetcher的使用方法,包括了获取指定版本的浏览器,获取下载的路径,以及如何指定版本号)
7. class: BrowserFetcher (这是BrowserFetcher的使用方法中文版)

3.编写成gulp任务

有了更新脚本,就要有gulp任务,填入你的用户名,密码,以及仓库地址,仓库地址的最后要加上pages页面。

1
2
3
4
5
6
//自动更新gitee
gulp.task('giteeUpdate', function (cb) {
giteeUpdate('你的用户名','你的密码','你的pages所在的仓库地址/pages');
// 调用后续步骤
cb();
});

执行gulp giteeUpdate之后,就会打开一个浏览器,然后输入用户密码,然后跳到pages页,然后执行更新命令。这里是有头模式,即会跳出一个浏览器,当然也可以用无头模式,不弹出浏览器,直接静默的更新,只需要将headless: false 这一步注释掉就可以了。

参考文章:
1. 何平 / gitee-publish (这是有人和我的方式类似,封装了pupeteer,进行了gitee自动更新,然后发布成了npm模块)

Did you forget to signal async completion?

如果遇到了上面的问题,可以参考下面的文章,里面有很多的解决方法,比如使用steam,使用Promise,使用done()等等方法。

4.验证码问题

使用pupeteer进行模拟登陆的自动更新pages的时候,如果在不常用的地方进行登陆,就会出现需要输入验证码的情况,比如我使用Azure Devops进行自动部署的时候,在执行到上面的pupeteer的时候,就会出现验证码的问题,会发送通知到你的手机上,让你输入密码,但是这个时候因为是自动化的脚本,所以没有办法输入验证码啊,所以这个使用pupeteer这个方法自动部署的方法可能要放弃,当然在自己的电脑上没有问题,因为你已经使用浏览器登陆过一遍了。

解决方法,就是通过gitee的微信公众号绑定自己的gitee账号,发放验证码就会改为了发送微信公众号通知了,就可以绕开验证码输入的过程了,完美解决AzureDevops自动部署gitee的问题了。

参考文章:
1.yanglbme/gitee-pages-action (这是一个使用git action进行自动部署的方案,也会遇到gitee输入验证码的问题,可以关注 Gitee 微信公众号,并绑定 Gitee 帐号,接收登录提示;还有就是图形验证码的问题,也可以可以手动登录 Gitee 官方,校验验证码)

5.WebHooks

参考文章:
1.Gitee码云通过WebHooks实现自动同步代码部署 (这里提到了Webhooks的技术)
2.码云webhook自动更新脚本
3.GiteePages自动部署 (这是有人写了一个.exe的可执行程序,进行每天定时自定更新和部署)
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。