Front-end development workflow

30 August 2014

by Michael Birch

My front-end development workflow.

I build development websites locally on my Mac and I use version control for every project — usually Subversion. I use Cornerstone which is a great Subversion app for Mac.

I use Sass, Compass and Bundler for pre-processing and compressing CSS and UglifyJS2 for javascript compression.

I know that gulp and Grunt are very popular task runners, but these days there is so much to learn and keep up with and in order to avoid getting overloaded I have used these simple shell scripts instead. I use LiveReload and run a custom command after processing changes, usually processCSS:

#!/bin/bash

PROJECT_DIR="/Users/mike/Sites/domainname/"

cd $PROJECT_DIR
bundle exec compass compile -q

If I’m working on a JavaScript file, I change the custom command in LiveReload to run processJS:

#!/bin/bash
PROJECT_DIR="/Users/mike/Sites/domain/"

DEV_DIR="javascript"
JS_DIR="public/js/"

cd ${PROJECT_DIR}${DEV_DIR}
shopt -s nullglob
for f in *.js
do   
  filename=$(basename "$f")
  filename="${filename%.js}"   
  uglifyjs $f -c -o ${PROJECT_DIR}${JS_DIR}${filename}.min.js
done