My homemade watch-script

If you’ve used Sass, or any other preprocessed language, you’re probably familiar with the “watch-option”. It’s an option that watches over a folder and runs some kind of command when its content is changed.

As you might know, it’s considered as good practice to combine and minify all your CSS and JavaScript when deploying a website into production. This will not only reduce the file size, but also reduce the number of HTTP requests that’s needed to deliver your website.

I decided to make a watch-script that would combine both JavaScript and my Sass-files. By doing this, I don’t have to mess around in my HTML-files as much, and I can freely add or remove files (like libraries) without having to do any extra work.

So without further ado…

Below is the watch-script, you can find a Gist here as well. Add this file to your root directory, and change the top variables to match your needs. JS_PATH and SASS_PATH are the input directories, and FINAL_JS and FINAL_CSS is the output files.

#!/bin/sh

JS_PATH="_js"
FINAL_JS="scripts.js"

SASS_PATH="_sass"
FINAL_CSS="."

sha=0
previous_sha=0

update_sha()
{
    sha=`ls -lRT $JS_PATH $SASS_PATH | gsha1sum`
}

build () {
    # Build/make commands here
    rm $FINAL_JS
    touch $FINAL_JS
    cat $JS_PATH/*.js >> $FINAL_JS
    echo "  \033[0;32m$FINAL_JS\033[0m"
    sass --update $SASS_PATH:$FINAL_CSS
}

changed () {
    echo " ≫ Change detected. Rebuilding..."
    build
    previous_sha=$sha
}

compare () {
    update_sha
    if [[ $sha != $previous_sha ]] ; then changed; fi
}

run () {
    update_sha
    previous_sha=$sha
    while true; do

        compare

        read -s -t 1 && (
            echo " ≫ Forced rebuild..."
            build
        )

    done
}

echo " ≫ Watching for changes. Press Ctrl-C to stop. Press enter to force rebuild."

run

The script will scan for changes by running the ls -lRT command and hash the result with a sha1-tool. Note that I’m using gsha1sum here, since that’s what Homebrew will name the application if you install coreutils. On some systems you might have to change that to sha1sum.

The watch-script will combine all files but it won’t minify the code, since I want to be able to debug code while developing. For minifying, I’ve made a little “deploy-script”, as seen below. You can find a gist here.

#!/bin/sh

JS_PATH="_js"
FINAL_JS="scripts.js"

SASS_PATH="_sass"
FINAL_CSS="."

echo " ≫ Building and minifying assets."

rm $FINAL_JS
touch $FINAL_JS
cat $JS_PATH/*.js >> $FINAL_JS
echo "  \033[0;32m$FINAL_JS\033[0m"
sass --force --update $SASS_PATH:$FINAL_CSS --style compressed

jsmin --overwrite scripts.js

This script requires that you have jsmin installed. I installed it via NPM. The Sass is compiled with the “compressed style”, which will remove comments and whitespace.

So yeah, these are some tools I use almost every day. I hope you’ll like them! And if you have any suggestions for how I can make them better, leave a comment!