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.
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/project23# And Then run this4mkdir -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
workflows folder, create a YAML file and call it
build-assets.yml and put this inside it
1name: Build Assets23on:4 push:5 branches: [ main ]6 pull_request:7 branches: [ main ]89jobs:10 build:11 runs-on: ubuntu-latest1213 steps:1415 - name: Checkout1617 uses: actions/[email protected]1819 - name: Setup Node.js2021 uses: actions/[email protected]2223 with:2425 node-version: '14'2627 check-latest: true2829 - name: Install NPM dependencies3031 run: npm install3233 - name: Compile assets for production3435 run: npm run production
If you want to compile your assets only in specific branch, let's say you want to run this only in the
master branch and not in
dev branch do the following
Instead of 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.
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.