Minisauras: A Github action to minify CSS and JS files
Tags: actionshackathon, javascript, github, showdev
Published: 2020-09-07 16:42:35

**👋 Hi Everyone**,

We are [**TeamTigers**](https://github.com/teamtigers), a group of undergrad students studying Bachelor of Science in Software Engineering. And here is our submission for **#ActionsHackathon**.

### **Our Workflow**

**Minisauras** is an open-source CI/CD automation tool based on [**GitHub Actions**](https://github.com/features/actions) that pulls all the desired JavaScript and CSS files from your base branch, minify them and creates a pull-request with a new branch.

#### How it works
- Traverse through a given directory (if not provided, traverse from root), finds all the JavaScript & CSS files within it and it's sub-directories. 
- Afterwards, **Minisauras** minify all those files.
- Finally, it creates a new branch in your repository, push those changes and creates a pull request that can be merged in your base branch.

### **Submission Category:** 

We are submitting this action in following categories:

📌 **DIY Deployments** (Primary)
📌 **Wacky Wildcards** (Secondary)


### **Yaml File or Link to Code**

#### Users' Guideline
- Create a [personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token).
- Then [setup a secret](https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) using that personal access token in your desired repository.
- Create a workflow. For example: **main.yml** under (.github/workflows) directory.
- In the workflow, provide following things:
    * Personal access token. For example: **secrets.TOKEN** if you set your secret with a name 'TOKEN'.
    * The desired directory in which you want to minify CSS and JS files. For example: `'./'` for root and `'src/'` for src directory.

```yml
- name: minisauras
  uses: TeamTigers/minisauras@v2.0.0
  env:
    GITHUB_TOKEN: ${{ secrets.TOKEN }}
  with:
    directory: 'src/' # all files under 'src' directory
```

**Minisauras Repository :**

{% github TeamTigers/minisauras %}


### **Additional Resources / Info**

#### 💡 **Example and output**

Here is an example repository that shows the usage of GitHub Action [minisauras](https://github.com/TeamTigers/minisauras). You can see there, how minisauras has minified all the CSS & JS files of this repository and sent a [Pull Request](https://github.com/TeamTigers/minisauras-example/pull/6) over there.

{% github TeamTigers/minisauras-example no-readme %}

Below is a pull request sent by **Minisauras** with changes in some CSS and JavaScript files:

![cat-pr](https://raw.githubusercontent.com/TeamTigers/minisauras-example/master/assets/cat-making-pr.gif)


Additionally, in the GitHub Action's console you will see the [confirmation of pull request](https://github.com/TeamTigers/minisauras-example/runs/1089529172?check_suite_focus=true) sent by Minisauras.

<a href='https://github.com/TeamTigers/minisauras-example/runs/1089529172?check_suite_focus=true'><img src='https://i.imgur.com/sfIp5ad.png' width=480></a>
 
#### Our journey 🤗 

It was a fun participating in GitHub Actions Hackathon. Usually in academic projects we develop Web or Mobile applications. We've participated in so many national & international Hackathons too. But in **#ActionsHackathon** we did something really new !!! We've faced so many challenges during the development period. Below is our 'Action Development Life Cycle' (ADLC). Obviously, this journey isn't over yet. We'll still be maintaining this project after the hackathon. So, you can submit [issues](https://github.com/TeamTigers/minisauras/issues/new) for improvements and new feature requests at anytime.

![Timeline](https://dev-to-uploads.s3.amazonaws.com/i/129jqdjs4ctz8moizhsi.png)


Here are some really good resources that helped us building **Minisauras**:

- [Creating a JavaScript Action](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action)
- [Octokit REST API Documentation](https://octokit.github.io/rest.js/)
- [Octokit plugin to create a pull request](https://github.com/gr2m/octokit-plugin-create-pull-request)
- [Promise in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)


#### All 3 Contributors
{% user _shunjid %}
{% user zubayerhimel0 %}
{% user jinnatul %}