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.
My approach to this is a Github action that:
main
branchbuild
branchThen 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:
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 github-username@user.noreply.github.com
git commit -am 'Automated minify of ${{ github.sha }}'
git push --force -u origin main:build
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.