使用 gh-pages 提交文件夹至任意分支

介绍

  在使用 github pages 服务展示页面时，会进行构建页面分支的选择，在我们使用 vue 构建项目进行 npm run build 操作后，会出现 dist 文件夹，如何方便快捷的将 dist 文件夹提交到另外的分支进行页面构建是一个问题，本文将会介绍一个非常好用的包来进行上述操作。

官方文档

  gh-pages 将文件发布到 GitHub 上的一个 gh-pages 分支（或其他任何地方的任何其他分支）。

文档

https://www.npmjs.com/package/gh-pages

gh-pages 安装和配置

安装

  在终端中进行安装

1
npm install gh-pages --save-dev

配置

  在文档中查看基础使用方法。

1
2
3
ghpages.publish(dir, callback);
// or...
ghpages.publish(dir, options, callback);

  现在我们编写将 dist 文件夹提交至 gh-pages 分支下的配置，打开 vue.config.js 填写进行如下配置。

1
2
3
4
5
// vue.config.js
const ghpages = require("gh-pages");
ghpages.publish("dist", function (err) {
  console.log(err);
});

  打开 package.json 在 scripts 项中添加如下配置,-d 后为要提交的目录，本文以 dist 文件夹为例。

1
2
3
4
// package.json
  "scripts": {
    "deploy": "gh-pages -d dist"
  },

使用

  在安装和配置完成后，我们若要进行提交操作，可以运行 npm run deploy 运行。

提交成功

  运行完成后出现 Published 字样说明提交成功，在仓库的 gh-pages 分支下可以看到提交信息。