A pre-commit hook to minify js & css files.

pre-commit

#!/bin/bash

# A pre-commit hook to update minified versions of
# css/js files on commit

# Go to the project's root
cd "$(dirname "$0")"
cd ../../

# Set up compression command
COMPRESSOR="./node_modules/uglify-js/bin/uglifyjs"

# Make sure compressor exists
if [[ ! -f $COMPRESSOR ]] ; then
    echo 'ERROR: Compressor is not installed! Aborting...'
    exit 1
fi

BRANCH=`git rev-parse --abbrev-ref HEAD`
if [ "$BRANCH" == 'master' ]
then
    # For each css and js file
    # If you want only certain files to be compressed
    # Change it to: for fname in file1 file2 file3; do 
    # TODO: It would be more effective to update only changed files,
    #   i.e. take list of files from staging and minify them instead of all js/css files
    find . -regextype posix-extended \
    -iregex '.+\.(css|js)$' \
    -not -iregex '.+\.min\.(css|js)' \
    -not -path "*node_modules*" \
    -print0 | while IFS= read -r -d $'\0' fname
    do
        echo "Minifying: $fname"
        # Name of minified version: myscript.js -> myscript.min.js
        minified_name="${fname%.*}.min.${fname##*.}"
        # Minify the file
        $COMPRESSOR --rename "$fname" > $minified_name
        # Add the file to commit
        git add $minified_name
    done
fi

Usage:

1. Put this to a file in <your procjet path>/.git/hooks. Name the file as pre-commit
2. Set and install your compressor:

• By default, the code uses uglify-js: npm install uglify-js --save-dev
• You might want to use yuicompressor, then install it and change 10th line to COMPRESSOR=$(whence -p yui-compressor)

3. Make sure the file is executable, i.e. chmod u+x .git/hooks/pre-commit

Hi,

I have a few questions for you if you don't mind:

• Does pre-commit (in this case minifying js and css files) run when I use Bitbucket or Fork etc?
• How can I run without the "$BRANCH" == 'master' restriction? I would like to minify aal the time, whatever branch it is.
• When I tried to test I always got find: -regextype: unknown primary or operator error. Any suggestion?

Hi,

Does pre-commit (in this case minifying js and css files) run when I use Bitbucket or Fork etc?

The instruction I gave, is for your local repository (on your machine where you do your development) not for remote repository providers like GitHub, GitLab, Bitbucket, etc.. If you want to use it on your remote repository, you probably will need to use a CI tool (Travis CI, GitLab CI, etc).

How can I run without the "$BRANCH" == 'master' restriction? I would like to minify aal the time, whatever branch it is.

Just remove that if block:)

When I tried to test I always got find: -regextype: unknown primary or operator error. Any suggestion?

This is probably because of your OS or find version. Have you tried to google it? I found this. Maybe it will help you

Thanks for the info and help!

Welcome) Hope this gist will help
FYI: Before using this, I would make sure that this is exactly what you need. In most cases, developers use tools like webpack or gulp for minifying and other processing of assets.

Yes, I'm using these building tools as well.

Then I doubt you should use this code:) But it is up to you of course. I do not know all the details.