Skip to content

Instantly share code, notes, and snippets.

@max1220
Created July 22, 2023 17:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save max1220/130c55ab101b869585a446b82818c000 to your computer and use it in GitHub Desktop.
Save max1220/130c55ab101b869585a446b82818c000 to your computer and use it in GitHub Desktop.
A simple CSS concatenation/minification script using only bash+sed+gzip.
#!/bin/bash
set -euo pipefail
# first argument is a path to a directory to minify CSS source files from
dir_path="${1}"
[ -d "${dir_path}" ]
css_files=("${dir_path%/}"/*.css)
concat_path="${dir_path%/}.css"
minified_path="${dir_path%/}.min.css"
gz_path="${dir_path%/}.min.css.gz"
echo "CSS Source files:"
printf "\t'%q'\n" "${css_files[@]}"
# concatenate
cat "${css_files[@]}" > "${concat_path}"
echo -ne "Concatenated size:\n\t"
wc -c "${concat_path}"
# minify
sed "/\/\*.*\*\//d;/\/\*/,/\*\// d" "${concat_path}" | tr -d "\t" | tr -d "\n" > "${minified_path}"
sed -i "s/: /:/g" "${minified_path}"
sed -i "s/ {/{/g" "${minified_path}"
sed -i "s/ > />/g" "${minified_path}"
echo -ne "Minified size:\n\t"
wc -c "${minified_path}"
# gzip
gzip --best < "${minified_path}" > "${gz_path}"
echo -ne "gzip'ed size:\n\t"
wc -c "${gz_path}"
@max1220
Copy link
Author

max1220 commented Jul 22, 2023

To use this, simple pass it a directory containing CSS files, they are concatenated in alphabetical order and minified(removes spaces, comments), e.g.:

$ wget https://gist.githubusercontent.com/max1220/130c55ab101b869585a446b82818c000/raw/minify_css.sh
$ chmod u+x minify_css.sh
$ mkdir my_css
$ echo "body { color: red } " > my_css/001_base.css
$ echo "h1,h2,h3,h4,h5,h6 { color: blue }" > my_css/002_headers.css
$ ./minify_css.sh my_css
CSS Source files:
	'my_css/001_base.css'
	'my_css/002_headers.css'
Concatenated size:
	54 my_css.css
Minified size:
	48 my_css.min.css
gzip'ed size:
	62 my_css.min.css.gz
$ ls -l my_css.*
-rw-r--r-- 1 max max   54 Jul 22 19:55 my_css.css
-rw-r--r-- 1 max max   48 Jul 22 19:55 my_css.min.css
-rw-r--r-- 1 max max   62 Jul 22 19:55 my_css.min.css.gz

Caveats(minifier):

  • Does not handle in-line comments well(put comments in separate lines!)
  • Can't minify variable names etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment