在GitHub页面构建期间最小化JavaScript



我有一个静态网站通过GitHub页面,建立在Jekyll-Bootstrap。我的小网站包含了很多JavaScript,为了可维护性,我希望所有的JavaScript都能在GitHub的repo中保持人类可读。

但是对于我的网站的最终用户,我更倾向于最小化JavaScript。

是否有办法在GitHub Pages构建过程中建立一个钩子来最小化/丑化JavaScript,以便最终用户可以下载更小的文件?

GitHub页面构建服务不能有任何其他代码运行在它上,除了Jekyll在安全模式和少量包含的插件。这样做是为了安全。

你最好的选择是使用替代服务来构建你的网站,并将结果推回GitHub。站点的源代码将驻留在主分支中,编译后的源代码驻留在h-pages中。

一个适合这样做的服务是许多CI服务中的一个,比如Travis CI。这些通常用于在每次推送到repo时运行软件测试套件,但也可以用于构建您的网站并将结果推送给您。

Jekyll文档有一个在Travis上测试构建的指南。push输出没有提到。您需要在Travis配置文件中的after_success派生文件中添加一个脚本。一个来自我维护的站点的例子。

要验证您的推送,脚本将需要访问您的github个人访问令牌。您不能直接将其放入部署脚本中,因为这是一个秘密。

如果你使用Github生成网站并显示它,没有选项可以这样做,因为Github对它将处理的内容很严格-为了安全。

一种解决方法是在本地进行编译和处理,然后将结果输出推到h-pages——它很乐意简单地托管静态页面。

你仍然可以使用github来托管项目。你只是不使用Github来编译它。

你的开发进程可能是:

  1. 检查主服务器和本地服务器是否匹配。
  2. 在开发模式下工作
  3. 在生产中构建。
  4. 使用grunt或其他程序来缩小/丑化/等_site生产文件-输出到一个单独的dist(分发)文件夹。
  5. 将dist文件夹的内容推送到你的h-pages。
  6. 将对项目文件的更改提交回主。

我可能没有太多的意义,但也许这个讨论可能会帮助更多:https://gist.github.com/cobyism/4730490

玩得开心!

您可以尝试使用我自己的迷你器https://github.com/Mendeo/jekyll-minifier。它完全是在液体上编写的,所以你不需要安装任何额外的gems,并且它与GitHub Pages完全兼容。

我的方法是一个Github动作:

  • 检出main分支
  • 执行缩小/清除等
  • 将更改推送到gh-pages分支

然后你只需要把Github Pages指向gh-pages分支而不是main分支。

您需要选择适当的CLI工具来在操作启动的虚拟机中执行最小化/清除。这里有很多选择。我建议使用可以通过node安装的软件包,这样您只需要在VM上安装它。例如:

  • PurgeCSS:删除不需要的CSS
  • terser:最小化JS
  • csso-cli:最小化CSS
  • HTML -minifier:最小化HTML

这是相对简单的Github操作,看起来有点像这样:

# 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 github-username@user.noreply.github.com
          git commit -am 'Automated minify of ${{ github.sha }}'
          git push --force -u origin main:gh-pages

下面是我的一个Github项目中类似过程的工作示例。

netflix是GitHub Pages的替代方案,它与GitHub集成(甚至是私有repos),并类似地发布Jekyll(或其他静态站点生成器)的输出。免费层有一些限制,但大多数个人用户不太可能遇到它们。

你应该能够添加一个Jekyll迷你插件在这里列出来完成你的目标。以下是插件的安装说明。

如果这对你有用,请添加评论!我很想听听结果如何

相关内容

  • 没有找到相关文章

最新更新