Minify & Purge HTML/CSS/JSS

Question

I use GitHub for source control my HTML, CSS and JS. I use Netlify / Cloudflare Pages to host my website (which is trigger off of a GitHub commit).

I work with static files (.html, .js and .css) and do not use programming frameworks like Ruby on Rails, Django, etc.

I’d like to create a GitHub Action that triggers on a git commit, to do the following:

a. Purge unused CSS. b. Minify the HTML, CSS and JS c. In-line the CSS & JS into the HTML file.

That way my site is minified, merged and purged of unused elements before it is automatically hosted by Netlify / Cloudflare Pages.

How would I go about doing this with GitHub Actions? I’ve looked into esbuild, webpack etc but all seem to come up short of being able to do all I need.

Answer 1

My approach to this is a Github action that:

• checks out the main branch
• performs the minification/purging etc
• pushes the changes to a build branch

Then you just need to point Github Pages (or Netlify in your case) at the build branch rather than the main branch.

You'd need to choose appropriate CLI tools to perform the minifying/purging in the virtual machine that the action spins up. There are lots of options here. I'd suggest using packages that can be installed through node so that you only have to install that on the VM. For example:

• PurgeCSS: Removes unneeded CSS
• terser: Minifies JS
• csso-cli: Minifies CSS
• html-minifier: Minifies HTML

I'm not aware of any tools that you could use to inline your JS/CSS (and don't know why you'd want to), but I suspect they exist.

This is relatively straightforward with a Github action that looks a bit like this:

# 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 [email protected]
          git commit -am 'Automated minify of ${{ github.sha }}'
          git push --force -u origin main:build