Jedním z mých nedávných nálezů na zlatém dole, kterým je GitHub, je účet GoalSmasher. Tým GoalSmashers vytvořil tři pozoruhodné (nebo pro mě alespoň užitečné) nástroje, o kterých byste měli všichni vědět:
- enhance-css:vloží snímky do šablon stylů pomocí kódování Base64
- clean-css:minifikuje a zřetězí soubory CSS
- assets-packager:vytváří, minifikuje a sdružuje soubory JavaScript a CSS do stejného příkazu
V tomto příspěvku bych se rád na chvíli podíval na clean-css, jednoduchý minifikační balíček CSS. Nástroj clean-css dělá přesně to, co byste očekávali od minifikátoru CSS:odstraňuje zbytečné mezery, odstraňuje komentáře, odstraňuje poslední středník každého selektoru a další!
Instalace clean-css
clean-css lze nainstalovat pomocí NPM, což je velmi pohodlné:
npm install clean-css
Můžete také jednoduše zkontrolovat zdroj z GitHubu.
Použití clean-css od Shell
Použití clean-css z shellu je jednoduché:
cleancss -o style.min.css style.css
Můžete dokonce použít základní příkazy shellu k předání zřetězeného vstupu do:
cat theme.css feature1.css feature2.css feature3.css | cleancss -o features.css
Nebo také řetězové gzipování:
cat theme.css feature1.css | cleancss | gzip -9 -c > feature1.css.gz
Komprese pomocí příkazů shellu je velmi užitečná pro rychlou ruční minfikaci nebo intenzivní procesy sestavení.
Používání clean-css prostřednictvím NodeJS Apps
clean-css lze také použít z kódu JavaScript:
# Get the clean-css package
var cleanCSS = require('clean-css');
# Read in the source of a file or use hard-coded CSS...
var source = "body { color: red; font-weight: bold; }";
# Minify!
var minifiedCSS = cleanCSS.process(source);
Obrovská sláva patří týmu GoalSmashers za jejich užitečné nástroje a za jejich open-sourcing pro nás všechny! Mám pocit, že někteří z vás budou upravovat (nebo vytvářet) svůj proces sestavování na základě své práce. Hodně štěstí při optimalizaci!