uncss:Najděte nepoužívané CSS

Víte, co je z pohledu kódu lepší než přidávání funkcí na web nebo do aplikace? Odstraňování věcí, které nepotřebujete. Ať už jde o kód, obrázky nebo závislosti, zbavení se svinstva zatuchlý kód je jako první doušek velké sklenky vína po dlouhém dni stresující práce. Spouštění adresáře obrázků přes ImageOptim je euforický zážitek, nemám pravdu? Co kdyby však existoval nástroj, který by vám umožnil najít nepoužívané CSS pro daný web? Existuje a nazývá se uncss , nástroj poháněný NodeJS. Podívejme se, jak uncss funguje!

Základní použití uncss Nástroj příkazového řádku 's by byl:

uncss https://davidwalsh.name > styles.css

Výstupem tohoto spuštění je šablona stylů obsahující pouze použité Pravidla CSS -- nepoužívaná pravidla jsou odstraněna. Jak tedy funguje uncss práce? Řeknu vám, jak na to:

Jako téměř každý nástroj založený na NodeJS můžete také využít jeho JavaScript API. Zde je příklad použití:

var uncss = require('uncss');

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = {
        ignore       : ['#added_at_runtime', /test\-[0-9]+/],
        media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
        csspath      : '../public/css/',
        raw          : 'h1 { color: green }',
        stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
        ignoreSheets : [/fonts.googleapis/],
        urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
        timeout      : 1000,
        htmlroot     : 'public'
    };

uncss(files, options, function (error, output) {
    console.log(output);
});

/* Look Ma, no options! */
uncss(files, function (error, output) {
    console.log(output);
});

/* Specifying raw HTML */
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
    console.log(output);
});

Nelze se dohadovat o tom, že roky údržby, přidávání a odstraňování z webu přidají do kódové základny přebytečný kód. Tento přebytečný kód je na úkor uživatelů, kteří načetli další kód, takže odstranění mrtvého kódu je důležité. Dejte uncss vyzkoušejte – je to snadno použitelný automatický pomocník, který udrží vaši kódovou základnu co nejtěsnější!