Unix philosophy-esque approach to web tooling

[Ongoing. I’ll be adding for snippets to this page that I find useful over time Suggestions are also welcome]

Creating WebP images #

If you want to recursively create .webp versions of images in a folder (same name, saved in same location, different extension name), this script will do that

while IFS= read -r -d '' file; do
  cwebp -q 90 "$file" -o "${file%.*}.webp" || true
done < <(find ./ -type f \( -name "*.png" -o -name "*.jpg" \) -print0)

Some notes:

• The cwebp binary from libwebp is required.
• The -q 90 flag is the quality factor.
• The snippet assumes that image files are either .jpg or .png.

Deployment #

Assuming you want dist/ to be the deployed folder

rsync -av . dist/ --exclude dist/ --exclude .git/ --exclude .gitignore

and to push the folder as a specific git branch, for example to deploy it on GitHub pages

git subtree push --prefix dist origin gh-pages

Minification #

Using the minify cli tool, this example snippet will minify any assets in the dist/ folder. Files that contain .min will be excluded

find ./dist/ -type f \( \
  -name "*.html" \
  -o -name '*.js' \
  -o -name '*.css' \
  -o -name '*.svg' \
  -o -name "*.xml" \
  -o -name "*.json" \
  -o -name "*.htm" \
  \) \
  -and ! -name "*.min*" -print0 |
  xargs -0 -n1 -P4 -I '{}' sh -c 'minify -o "{}" "{}"'