Logo

dev-resources.site

for different kinds of informations.

Automatically Run Build Script When Switching Branchs Using Git Hooks

Published at
10/23/2020
Categories
git
gulp
Author
fpcorso
Categories
2 categories in total
git
open
gulp
open
Author
7 person written this
fpcorso
open
Automatically Run Build Script When Switching Branchs Using Git Hooks

This was originally published over on frankcorso.dev.

I have recently been working on a project where we had multiple different JavaScript-heavy features being developed. So, there were many times where I switched branches to test out features.

But, I would constantly spend countless time figuring out why the feature wasn't working until I realized I had once again forgotten to build the assets.

So, I started looking into git hooks to see what my options were.

What are git hooks?

Within git, there are 17 events that fire upon different actions being taken. During each event, there is a "hook" that anyone can hook scripts into.

Some of these hooks include:

  • post-checkout: Ran after checking out a branch
  • post-merge: Ran after a git pull is run
  • pre-commit: Ran prior to a commit being created
  • post-commit: Ran after the commit is created

Each git repo has a .git/hooks directory that can contain scripts to be hooked into any of the hooks. You can drop a script that matches a hook's name into this folder.

Since this was a simple gulp command, I used a bash script. But, you could also use other languages, including Ruby or Python.

Hooking into post-checkout

In order to run code upon switching branches, we need the post-checkout hook. This hook fires after you checkout a branch or a file.

Inside the .git/hooks directory, I added a new file named post-checkout.

The post-checkout script gets called with three parameters:

  1. The previous HEAD
  2. The new HEAD
  3. A flag for if it's a branch that is being checked out. 1 for branch and 0 for not.

Since this also gets called when you check out a file, such as rolling back a file, this can cause a cycle where you roll back a built file, and then it autogenerates the file again. To get around this, I check for the third parameter to make sure it's a '1'.

Inside my if, I then added our gulp task, which builds all of our assets, gulp prebuild.

#!/bin/sh
#
# Builds our assets upon checkout
#
# Args passed to this are:
# $1 - Previous HEAD
# $2 - New HEAD
# $3 - 1 if checking out a branch, 0 if checking out something else, such as a file (rollbacks)
#
if [ '1' == $3 ]
then
    echo 'Branch checkout detected. Building assets...'
    gulp prebuild
fi
Enter fullscreen mode Exit fullscreen mode

Next Steps

Now that I have a rough idea of how git hooks work, I could see having scripts for validating commit messages, creating notifications, or automating other build tasks. I also came across articles on automating simple deployments using the post-receive hook, which I could see one used to build simple websites or even docker containers automatically.

gulp Article's
30 articles in total
Favicon
Automating SharePoint Framework Solution Versioning with Gulp and NPM
Favicon
How to Build Component Libraries
Favicon
Building Vue3 Component Library from Scratch #7 Using Gulp to Implement On-Demand Import
Favicon
Building Vue3 Component Library from Scratch #6 Gulp Introduce
Favicon
Gulp versus Grunt
Favicon
10 Curiosidades Intrigantes sobre o Gulp: Domine a Automação de Tarefas no Desenvolvimento Front-End
Favicon
10 Curiosidades Intrigantes sobre o Gulp: Domine a Automação de Tarefas no Desenvolvimento Front-End
Favicon
How to automate your web developer's routine with Gulp
Favicon
How to setup Gulp with ES6
Favicon
Angular & Gulp: custom assets hashing mechanism
Favicon
How To Protect Your Code While Using Gulp
Favicon
Live-updating Sass in Eleventy and WordPress with Gulp and BrowserSync
Favicon
ASP.NET Core Bundling and Minification Using Gulp
Favicon
University Student Dashboard UI
Favicon
Integrating Jest with Gulp
Favicon
Using Gulp with Dart Sass
Favicon
Properly precompile Handlebars templates and partials with Gulp
Favicon
Como precompilar seus templates e partials de Handlebars com Gulp
Favicon
How to use 'CSSNANO' in Gulp
Favicon
I like my eleventy with a side of SCSS
Favicon
Compile and Bundle Javascript es6 with Browserify + Babelify + Gulp
Favicon
Tools I Use to Develop, Edit and Deploy Ghost Themes
Favicon
How to setup Tailwind CSS with PostCSS & Browsersync?
Favicon
Gulp vs Parcel vs Webpack
Favicon
Avoid long-running Gulp tasks with this simple Gulp caching plugin
Favicon
Use case when to use Webpack VS Gulp?
Favicon
Improve website performance by optimizing HTML with gulp 4 & browser-sync
Favicon
Getting Started with TailwindCSS and Gulp Workflow
Favicon
Run Gulp 4 tasks programmatically from NodeJS
Favicon
Automatically Run Build Script When Switching Branchs Using Git Hooks

Featured ones: