Git Hook – npm install if package.json is Modified

By  on  

Most of the projects I work on these days contain a frequently-modified package.json file to manage dependencies.  You would think by know I'd be used seeing the package.json file when I did a git pull and it would trigger something in my head to execute npm install to ensure I had the latest dependencies installed but I somehow continue to forget to do so.  Instead I see npm start  result in errors which leads to facepalm after facepalm.  It's probably time to automate this task.

A quick Google search led me to a series of gists to use a git hook to trigger npm install if a package.json file has been updated. Place a post-merge file in your .git/hooks directory with the following contents:

#/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com

# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.

changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

check_run() {
	echo "$changed_files" | grep --quiet "$1" && eval "$2"
}

# Example usage
# In this example it's used to run `npm install` if package.json changed and `bower install` if `bower.json` changed.
check_run package.json "npm install"
check_run bower.json "bower install"

Reading down the comments in the gist show a number of other useful conditional triggers, like PHP's composer install, preprocessing of .sass files, and more.

# Updating git submodules
check_run .gitmodules "git submodule init && git submodule update"

# Installing composer dependencies
check_run composer.json "composer install"

# For those who use gulp
check_run web/assets "gulp --production"

This hook will be incredibly useful for me moving forward -- no more needing to remember steps I need to execute upon every pull!

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

  • By
    JavaScript Canvas Image Conversion

    At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one...

Discussion

  1. Lars

    I’m using the same script for all the projects I’m working on, just with a small addition bower and number I run number prune && number install. To make sure only packages are installed that are actually in the package.json and bower.json

  2. Tim

    I agree with Lars’ point about adding npm prune to the hook. Pruning removed packages will help you make sure you don’t get false positives by writing code that depends on a package that isn’t part of the repo.

  3. Pretty cool trick. I’ll have to add this script, along with Lars’ tip.

  4. How would you go about checking if npm is installed first? What if some of your dev team, for instance, does not have NodeJS installed?

    • Jamie

      What if they are using svn instead of git?

  5. Robert

    The shebang is missing from the first line, it should start with hashmark-exclamation mark

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!