Create account

DEV Community

Abhishek Keshri

Posted on Sep 14, 2020

Gulp Runner - Dipping my toes into Github Actions

#actionshackathon

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.