Gulp Runner - Dipping my toes into Github Actions

Hello Github Actions

GitHub actions are something that I was always curious about but never really explored, thanks to this hackathon I took a dive and was able to come up with something that actually solves one of my problems.

Gulp Runner

Like many of us, I have a personal site deployed on GitHub Pages. 🌐

It uses SCSS so I have to convert it to CSS pre-deployment, I also like to have my scripts and styles minified.
While building the site I used gulp for these tasks and everything worked as it should.

The only issue is when I have to make some quick updates to the styles or scripts on a new machine or on my phone, I have to setup the local dev environment along with node, npm and lots of node modules.

While reading up on GitHub actions this is the problem that came up to my mind, that can be fixed quite easily using a simple workflow. 🤔

What this action does is, on push events it looks at changes in the script and styles file. If it does find any changes It runs and carries out the gulp tasks (sass -> css & minifying) and makes a new commit.

Thus allowing me to tweak my site from anywhere without worrying about node or npm at all. 📱😁

Submission Category:

• Phone Friendly
• DIY Deployments

gulp-runner.yml

name: Run gulp tasks

# Controls when the action will run.
on:
  push:
    # On which branch
    branches: ["master"]
    # On which files
    paths: ["scripts/scripts.js", "styles/styles.scss"]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # Job name
  build:
    # Runner name
    runs-on: ubuntu-latest

    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # Sets up node
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm ci
      - run: gulp

      - name: Commit files
        run: |
          git config --local user.name  ${{ github.actor }}
          git add -A
          git commit -m "Update gulp output files"
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.REPO_GITHUB_TOKEN }}
          # force: true

Additional Resources / Info

My portfolio site's repo, using this workflow

2KAbhishek / 2kabhishek.github.io

My personal space on the interweb. 🖤🌐

2kabhishek.github.io

This is the source for my personal portfolio site of the same name. Live version

Feel free to fork it for your own use.

Run npm install after clone to install all the required dependencies.

Uses gulp for task management, you can either use npm i -g gulp or use npx gulp to run tasks.

Tasks:

• gulp styles: This project uses sass for styling, run gulp styles to convert styles/styles.scss into minified styles/styles.css.
• gulp scripts: Minifies scripts/scripts.js into scripts/scripts.min.js.
• gukp watch: Actively watch for file changes and run tasks as needed.

Sections

• Lead: Contains name, designation & other contact links.
• About: Contains short description and/or career goals.
• Experience: Previous work experiences in chronological order.
• Skills: Lists acquired skills and industrial knowledge.

If you are looking for the legacy version with Education and Projects sections, check the legacy branch

View on GitHub

My unsuccessful attempt to turn it into a reusable action, need some more reading, If anyone knows what I'm doing wrong please help me out. 🙏🏼

2KAbhishek / gulp-runner

Runs defined gulp tasks on push. 🥤🏃🏻

gulp-runner

Gulp Runner

This github action will run default tasks mentioned in a gulp file and then commit the changes.

Requirements

Add a secret named REPO_GITHUB_TOKEN to your repo for pushing updated changes.

Customization

In your repo's .github/workflows/main.yml file paths can be customized.

More customizations

For custom commit messgaes, fork the repo, In the .github/workflows/gulp-runner.yml commit messages can be customized.

View on GitHub