在 GitHub Pages 构建过程中是否可以压缩 JavaScript？

Question

我有一个使用Jekyll-Bootstrap构建在GitHub Pages上的静态网站。我的网站包含很多JavaScript，为了可维护性，我希望所有JavaScript在GitHub代码库中保持人类可读性。

但是对于我的网站的最终用户，我宁愿对JavaScript进行缩小。是否有一种方法可以在GitHub Pages构建过程中构建钩子来缩小/混淆JavaScript，以便最终用户可以下载更小的文件？

- john_science

---

你有没有探索过实现这个的方法？你有 GitHub 仓库的链接吗？ - David Jacquel

@DavidJacquel 我的 GitHub Pages 存储库链接：https://github.com/theJollySin/thejollysin.github.io。我有没有尝试过某种方法来实现这个？是的，但我还没有找到任何方法将构建钩子放入 GitHub Pages 构建过程中，因为对我来说它是一个不可见的过程。但我拒绝相信没有办法添加构建钩子，即使是对于静态网站。 - john_science

Answer 1

GitHub页面构建服务除了在安全模式下运行的Jekyll和少量包含的插件之外，不能运行其他任何代码。这是为了安全考虑。

您最好的选择是使用替代服务来构建网站，并将结果推送回GitHub。网站源代码应位于主分支中，编译后的源代码位于gh-pages中。

一个适合此任务的服务是众多CI服务之一，比如Travis CI。这些通常用于在每次提交到仓库时运行软件测试套件，但也可以用于构建您的网站并将结果推送回您。

Jekyll文档中有在Travis上测试构建的指南。没有提到推送输出。您需要在Travis配置文件的after_success派生中编写脚本。以下是我维护的一个站点的示例。

要验证您的推送，脚本将需要访问您的GitHub个人访问令牌。您不能直接将其放入部署脚本中，因为它是一个秘密。请参阅Travis文档中有关加密环境变量的内容。

- wjdp

---

好的，这是对我的网站进行比我预期更加严肃的更改。所以我将尝试Travis和Grunt并看看会发生什么。感谢您的观点。 - john_science

指南链接不再打开 - serge

更新：现在你可以使用 Github Actions 来构建网站了。你只需要一个 Github Actions 工作流程，当检测到对 main 分支的推送时，它会检出该分支，在原地进行缩小，然后将更改推送到 gh-pages 分支。然后可以配置 Github Pages 仅基于 gh-pages 分支进行构建。这里是一个可用的例子，可以实现这一点。 - Ari Cooper-Davis

Answer 2

如果你正在使用 GitHub 生成网站并展示它，那么这是没有选项的，因为 GitHub 会限制它处理的内容以确保安全性。一个解决方法是在本地进行编译和处理，然后将结果输出到 gh-pages 并推送 - gh-pages 可以轻松托管静态页面。您仍然可以使用 Github 托管项目，只需不使用 Github 进行编译。开发流程可能如下所示：1）检查主分支和本地代码是否一致；2）在 dev 模式下工作；3）编译生产模式；4）使用 grunt 或其他程序对_site生成文件进行压缩/混淆等处理，并将其输出到单独的 dist（分发）文件夹；5）将 dist 文件夹的内容推送到您的 gh-pages 分支上；6）将项目文件的更改提交回主分支。这里有更多讨论可以帮助你理解：https://gist.github.com/cobyism/4730490。祝玩得愉快！

- TBB

Answer 3

你可以尝试使用我自己的压缩工具https://github.com/Mendeo/jekyll-minifier。它完全基于Liquid编写，因此您不需要安装任何额外的gems，并且与GitHub Pages完全兼容。

- Александр Меняйло

---

我会试一下，看看效果如何！ - john_science

Answer 4

我的做法是使用 Github Action，它会执行以下操作：

• 检出 main 分支
• 进行压缩/清理等操作
• 将更改推送到 gh-pages 分支

然后，您只需要将 Github Pages 指向 gh-pages 分支，而不是 main 分支。

您需要选择适当的 CLI 工具来在 Action 启动的虚拟机上执行压缩/清理操作。这里有很多选择。我建议使用可以通过 node 安装的软件包，这样您只需要在 VM 上安装它即可。例如：

• PurgeCSS: 删除不必要的 CSS
• terser: 压缩 JS
• csso-cli: 压缩 CSS
• html-minifier: 压缩 HTML

使用类似下面这样的 Github Action 相对简单：

# A Github Action that minifies html/css/js and pushes it to a new branch
name: purge-and-minify

# Run on pushes to `main` branch
on:
  push:
    branches:
      - 'main'

jobs:
  checkout-minify-push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      # Install CLI tools
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install -g terser
      - run: npm install -g csso-cli
      - run: npm install -g html-minifier

      # Use CLI tools to minify, overwriting existing files
      - run: for i in ./js/*.js; do terser $i --compress -o $i; done
      - run: for i in ./css/*.css; do csso $i -o $i; done
      - run: for i in ./html/*.html; do html-minifier [--your-options-here] $i -o $i; done
      
      # Push changes to `gh-pages` branch
      - run: |
          git config user.name github-username
          git config user.email [e-mail]
          git commit -am 'Automated minify of ${{ github.sha }}'
          git push --force -u origin main:gh-pages

这是我一个Github项目中类似过程的可行示例。

- Ari Cooper-Davis

Answer 5

Netlify 是 GitHub Pages 的替代品，可以与 GitHub 集成（甚至私有仓库），并类似地发布 Jekyll（或其他静态网站生成器）的输出。免费套餐 有一些限制，但大多数个人用户不太可能遇到这些问题。

您应该能够添加此处列出的 Jekyll 压缩插件之一来实现您的目标。这里是插件安装说明。

如果这对您有用，请添加评论！我很想听听它的效果如何。

- SeanFromIT