Introduction

When we build an application, We need to compile assets to make our website faster, and we ride off unnecessary CSS or JavaScript code.

As we spoke in previous article on how to deal with GitHub Actions and PHP-CS-Fixer. Today we will talk about how to compile assets on the fly using GitHub Actions as well.

Prerequisite

You need the basics of GitHub & Background on how NPM CLI works.

Configure GitHub Actions

In order to add NPM compile file configuration to your GitHub action project repository, you need to create in your project codebase two folders

1cd /path/to/your/project
2 
3# And Then run this
4mkdir -p .github/workflows

With this command we created 2 folders, one called .github and the second one is workflows to let GitHub know that the files lives in the directory workflows is for GitHub Action

Creating YAML File

Inside workflows folder, create a YAML file and call it build-assets.yml and put this inside it

 1name: Build Assets
 2
 3on:
 4  push:
 5    branches: [ main ]
 6  pull_request:
 7    branches: [ main ]
 8
 9jobs:
10  build:
11    runs-on: ubuntu-latest
12
13    steps:
14
15      - name: Checkout
16
17        uses: actions/checkout@v2
18
19      - name: Setup Node.js
20
21        uses: actions/setup-node@v2-beta
22
23        with:
24
25          node-version: '14'
26
27          check-latest: true
28
29      - name: Install NPM dependencies
30
31        run: npm install
32
33      - name: Compile assets for production
34
35        run: npm run production

Note:

If you want to compile your assets only in specific branch, let's say you want to run this only in the main or master branch and not in dev branch do the following

Instead of this

1on: [push]

Do This

1on:
2  push:
3    branches: [ main ]
4  pull_request:
5    branches: [ main ]

We Tell GitHub Actions to compile your assets only when we push changes or accepting a pull_request, otherwise skip this step.

Conclusion

Today We Learned about GitHub Actions and compile assets and how to use them in your application to help you automate your workflow and be more productive and focus on your code rather than fixing coding standards such as removing unused CSS or minify your styles file.

That's it for today and hope you learned something useful, and if you have any question put them in the comment section, and I'll very be happy to answer them.