loading...

Auto-Minify JS & CSS Files GitHub Action

nizarmah_ profile image Nizar ・3 min read

I have this open source calendar javascript library that I have been maintaining for quite some time now. It requires minifying the JavaScript and CSS files before every release so that they can be included by other users cleanly into production. Unfortunately, I was doing that manually at first, but then I thought I might as well automate it.

I thought at first of creating a bash script and using it to minify the files automatically. But at that time, GitHub Actions were released out of beta and I thought that it is a good idea to utilize them!

So, I made my way to the GitHub Actions Marketplace, and I tried searching for an action to minify the desired files. Finding no results of what I wanted, I ended up creating my own, thus, the name auto-minify.

Workflow

There are many different ways to utilize the action. Currently, the following inputs are available:

Input Description Required Default Value
directory Directory that contains the files you want to minify. false . (current directory)
output Directory that contains the minified files. false same as directory
maxdepth Descend at most levels (a non-negative integer) levels of directories below the starting-points. false "" (empty)
js_engine Specifies which of the supported packages minifies JS files. Supported packages: babel, uglify-js false babel

The README in the repository has a bunch of examples for different use-cases, which include:

Some real examples can be found below under Popular Repositories Currently Using the Action.

GitHub Actions Hackathon

During that time, the GitHub Actions hackathon started. Accordingly, I made the decision to submit it into the hackathon without much expectations. After all, the goal behind that action was to facilitate my workflow, which it did.

After a while, the hackathon ended and I was among the Featured Submissions! 🎉

Featured Submission Screenshot

DEV GitHub Actions Hackathon

This post is also a submission for the GitHub Actions Hackathon on DEV

The repository is being maintained and used by a couple of people, who have contributed to the repository through issues and pull requests.

Because enhancements and additions have been made to the action, I thought of entering with it for this hackathon too.

Submission Category:

Maintainer Must-Haves, DIY Deployments

More results can be found here

Link to Repository

GitHub logo nizarmah / auto-minify

Minifies JS and CSS files with Babel-Minify and CleanCSS

auto-minify

Minifies JS and CSS files with Babel-Minify and CleanCSS

Inputs

Input Description Required Default Value
directory Directory that contains the files you want to minify. false . ( current directory )
output Directory that contains the minified files. false same as directory
maxdepth Descend at most levels (a non-negative integer) levels of directories below the starting-points. false "" (empty)
js_engine Specifies which of the supported packages minifies JS files. Supported packages: babel, uglify-js false babel

With the addition of maxdepth, the action traverses by default into all subdirectories in a specified directory.

Follow this example if you want to minify the files in the first level of a certain directory.

Example

Default implementation
steps
  # Checks-out your repository under $GITHUB_WORKSPACE, so auto-minify job can access it
  - uses: actions/checkout@v2
  - name: Auto Minify
    uses: nizarmah/auto-minify@master
  # Auto commits minified files to the repository
  # Ignore it if

Discussion

pic
Editor guide