logo标签列表

压缩和清理 HTML/CSS/JSS。

htmlcsswebpackgithub-actionsesbuild
3

我使用GitHub进行HTML、CSS和JS代码的源代码控制，使用Netlify/Cloudflare Pages来托管我的网站（触发器是GitHub提交）。

我处理静态文件（.html、.js和.css），不使用像Ruby on Rails、Django等编程框架。

我想创建一个可在git提交时触发的GitHub Action，以执行以下操作：

a. 清除未使用的CSS。 b. 最小化HTML、CSS和JS c. 将CSS和JS内联到HTML文件中。

这样，在Netlify/Cloudflare Pages自动托管我的网站之前，我的网站将被最小化、合并和清除未使用的元素。

我应该如何使用GitHub Actions实现这一点？我已经了解了esbuild、webpack等工具，但它们似乎都不能满足我的全部需求。

1
Netlify会在你推送到代码库后自动运行构建命令（在你设置好之后），因此你不需要除了在package.json中编写一个简单的npm脚本之外的任何其他东西。我在这里写了关于如何做到这一点的文章：https://hgrid.io/documentation/production/ （你可以将HTML和JS压缩添加到相同的例程中。查看hgrid.io代码库中的package.json以获取更多想法。） - anatolhiman
抱歉，我错过了内联CSS部分。这可能需要更多的工作，因此您可能需要一个打包程序。但是，可以在服务器上使用单个构建命令运行的所有内容都可以适合该过程。 - anatolhiman
@anatolhiman，感谢您的博客文章。您是否有一个版本，可以展示所有最终代码的组合？ - Mike P.
基本上你只需要这些脚本，看看我在这里是如何做同样的事情+压缩和混淆JS：https://github.com/ahansson/hgrid.io - anatolhiman
在这里，您可以看到如何在Netlify中配置您选择的构建命令，该命令会运行package.json中的所有单独构建脚本：https://www.netlify.com/products/build/ - anatolhiman
1个回答
2
我的解决方案是使用Github action：
  • 检出main分支
  • 执行压缩/清除等操作
  • 将更改推送到build分支
然后，您只需要将Github Pages（或您的情况下为Netlify）指向build分支，而不是main分支即可。
您需要选择适当的CLI工具，在该操作产生的虚拟机中进行压缩/清除操作。这里有很多选项。我建议使用可以通过node安装的软件包，这样您只需要在VM上安装它。例如： 我不知道是否有任何工具可以内联JS / CSS（也不知道为什么要这样做），但我认为它们存在。
使用类似于以下代码的Github action相对简单：
# A Github Action that minifies html/css/js and pushes it to a new branch
name: purge-and-minify

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 `build` 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:build
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接