public
Last active

Combine & compress multiple css / js files

  • Download Gist
compile.bash
Shell
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
#!/bin/bash
 
# move to the directory which the script is placed in
# all file refences will be based off this location
cd `dirname $0`
 
# == Configuration Options ==
 
CSS_OUTPUT_FILE='css/core.css'
JS_OUTPUT_FILE='js/core.js'
 
JAVASCRIPT_FILES=(
js/util/mootools.js
js/util/mootools-more.js
js/util/validator.js
js/util/auto-clear.js
js/ui/datepicker.js
js/util/loop.js
js/ui/slideshow.js
js/util/swfobject.js
js/ui/autocomplete/Autocompleter.js
js/ui/autocomplete/Autocompleter.Request.js
js/ui/autocomplete/Observer.js
js/util/common.js
js/common.js
)
 
CSS_FILES=(
css/lib/reset.css
css/lib/forms.css
css/lib/typography.css
css/lib/screen.css
css/lib/structure.css
css/pages/testimonials.css
css/structure.css
css/lib/plugins/autocompleter.css
css/lib/plugins/datepicker.css
css/lib/plugins/slideshow.css
css/pages/seminar.css
css/pages/video.css
css/pages.css
)
 
# == End Configuration Options ==
 
generate_js_include() {
echo "document.write('<script src=\"/includes/$1\" type=\"text/javascript\" charset=\"utf-8\"></script>');"
}
 
generate_css_include() {
echo "@import \"/includes/$1\";"
}
 
if [[ "$USER" == "Mike" ]]; then
DEVELOPMENT=1
else
DEVELOPMENT=0
fi
 
if [[ -e $HOME/scripts/yuicompressor.jar ]]; then
CSS_OPTIMIZER='cssoptimizer'
JS_OPTIMIZER="$HOME/scripts/yuicompressor.jar"
else
CSS_OPTIMIZER='cssoptimizer'
JS_OPTIMIZER='/usr/bin/yuicompressor.jar'
fi
 
if [ $DEVELOPMENT == 1 ]; then
> $JS_OUTPUT_FILE
for file in ${JAVASCRIPT_FILES[@]}; do
generate_js_include "$file" >> $JS_OUTPUT_FILE
done
> $CSS_OUTPUT_FILE
for file in ${CSS_FILES[@]}; do
generate_css_include $file >> $CSS_OUTPUT_FILE
done
# we dont want the server trying to serve the wrong data
if [[ -e "$CSS_OUTPUT_FILE.gz" ]]; then
rm "$CSS_OUTPUT_FILE.gz"
fi
if [[ -e "$JS_OUTPUT_FILE.gz" ]]; then
rm "$JS_OUTPUT_FILE.gz"
fi
exit 0
fi
 
# Darwin is assuming os x
 
if [[ `uname` == "Darwin" ]]; then
tempFile=`mktemp -t webcompress.xxx`
else
# mktemp on server runs differently than the os x version
tempFile=`mktemp`
fi
 
# Compress CSS
 
for file in ${CSS_FILES[@]}; do
# count /'s.. if we are father down in the directory replace ../../../ with ../
if [[ `echo "$file" | perl -ne 'while(/\//g){++$count}; print "$count\n"'` > 2 ]]; then
cat $file | sed 's/\.\.\/\.\.\/\.\.\//..\/..\//g' >> $tempFile
else
cat $file >> $tempFile
fi
done
 
"$CSS_OPTIMIZER" -lo $tempFile > $CSS_OUTPUT_FILE
 
# the IE file needs to be compressed
# whitespace causes issues with IE
# we have to do this round-about compression b/c of a bug in cssoptimizer
cp 'css/lib/ie.css' 'css/lib/ie2.css'
"$CSS_OPTIMIZER" -lo 'css/lib/ie2.css' > 'css/lib/ie.css'
 
# Compress JS
 
> $tempFile
 
for file in ${JAVASCRIPT_FILES[@]}; do
cat $file >> $tempFile
done
 
java -jar "$JS_OPTIMIZER" --type js "$tempFile" > "$JS_OUTPUT_FILE"
 
# gzip compress, but keep the original core.css in addition to the newly created core.css.gz
 
gzip -fc "$JS_OUTPUT_FILE" > "${JS_OUTPUT_FILE}.gz"
gzip -fc "$CSS_OUTPUT_FILE" > "${CSS_OUTPUT_FILE}.gz"
 
exit 0

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.