Pomocou PostCSS pre Minification a optimalizácia

Slovak (Slovenčina) translation by Tereza Foretová (you can also view the original English article)

V poslednom tutoriále ste sa naučili ako používať PostCSS pomôcť tomu, aby vaše stylesheets viac kríž prehliadač kompatibilný, najmä zaoberá problémy vyplývajúce z podpory starších verzií IE.

V tomto tutoriále budeme učiť ako zefektívniť váš štýlmi a zaťaženie rýchlejšie, pomocou PostCSS vykonávať rôzne operácie minification a optimalizácia.

Dozviete sa ako:

Skombinovať viaceré štýly do jedného cez @import pravidlo, aj keď niektoré z vašich štýly prichádzajú Bower komponenty alebo npm modulov, čo vám zabezpečí potrebné len jeden http žiadosť na načítanie vašej stránky CSS.
Kombinovať zodpovedajúce media dotazov do jedného, umožňuje použiť ten istý dotaz médií na viacerých miestach počas vývoja, ale napriek tomu koniec s účinnosťou konsolidovanej dotazy sa vaše konečné štýlov.
Pomocou cssnano pack vykonávať všetky druhy optimalizácie z vyfukovacieho medzeru a komentáre k minifying určité druhy kód a oveľa viac.

Poďme začať!

Nastavenie vášho projektu

Prvá vec, ktorú musíte urobiť, je nastavenie vášho projektu používať dúškom alebo Grunt, v závislosti na vašich preferenciách. Ak ešte nemáte preferencie pre jednu, alebo iné odporúčam používať dúškom budete potrebovať menej kódu na dosiahnutie rovnakej konca, tak by ste mali nájsť to trochu jednoduchšie pracovať.

Môžete si prečítať o nastavenie dúškom alebo Grunt projekty pre PostCSS v predchádzajúcich cvičeniach

PostCSS Quickstart manuál: Dúškom inštalácie alebo
PostCSS Quickstart manuál: Grunt Setup

v uvedenom poradí.

Ak nechcete, aby ručne nastaviť váš projekt na zelenej lúke hoci, môžete stiahnuť zdrojové súbory pripojené na tento tutoriál a extrahovať buď poskytované dúškom alebo Grunt starter projektu do prázdne project priečinok. Potom s terminálu alebo príkazového riadka poukázal na priečinok, spustiť príkaz npm nainštalovať.

Inštalácia pluginy

Z tohto tutoriálu budeme používať dva individuálne pluginy, plus plugin pack. Ich inštaláciu spustením nasledujúceho príkazu vnútri priečinka projektu:

1	npm install postcss-import css-mqpacker cssnano --save-dev

Teraz sú nainštalované pluginy, Poďme do toho a nahrať ich do vášho projektu.

Nahrať pluginy cez dúškom

Ak používate dúškom, pridajte tieto premenné podľa premenné už v súbore:

1	var atImport = require('postcss-import');
2	var mqpacker = require('css-mqpacker');
3	var cssnano = require('cssnano');

Teraz pridať každá z týchto nových názvov premenných do procesorov pole:

    var processors = [
  	atImport,
		mqpacker,
		cssnano
	];

Urobiť rýchly test, že všetko pracuje spustením príkazu dúškom css potom overovať nové "style.css" súbor sa objavil v váš projekt "dest" priečinok.

Nahrať pluginy cez Grunt

Ak používate Grunt, aktualizovať objekt procesory, ktorá bude vnorená v objekte možnosti, takto:

        processors: [
          require('postcss-import')(),
          require('css-mqpacker')(),
          require('cssnano')()
        ]

Urobiť rýchly test, že všetko pracuje spustením príkazu grunt postcss potom overovať nové "style.css" súbor sa objavil v váš projekt "dest" priečinok.

Ktorý má všetkých pluginov nainštalovaný a načítaný, tak sa poďme presunúť na naučiť sa ich používať pre minification a optimalizácia.

Inline/spojiť súbory s @import

Skôr než individuálne nakladanie viacerými štýlmi, je účinnejšie, ak je to možné spojiť svoje štýly do jedného.

Napríklad použitie Normalize.css je veľmi časté, ale ak ju ako samostatný stylesheet nahrať pred hlavnej stylopis, vyžaduje viacero http požiadavky, preto spomaľuje načítania.

Avšak ak používate plugin postcss-import v Maxime Thirouin, môžete kombinovať Normalize.css do hlavnej stylopis, cez použitie pravidla @import, vám dáva rovnaký CSS s len jeden http požiadavky.

@import potom Inline Normalize.css

Poďme ďalej a urobiť to teraz, import a potom inlining Normalize.css do nášho projektu stylopis. Začnite stiahnutím "normalize.css" do priečinka "src" vášho projektu, od https://necolas.github.io/normalize.css/

V hornej časti vášho "src/style.css" súboru pridajte nasledujúci riadok:

1	@import 'normalize.css';

Ako ste už postcss-import nainštalovaný, to je všetko, čo musíte urobiť. To uvidíte @import pravidlo a automaticky inline kód z normalize.css súboru do vašej stylopis.

Zostaviť súbor, a keď sa pozriete na svoje "dest/style.css" súboru, mali by ste vidieť celý obsah "normalize.css" v ňom:

1	/! normalize.css v3.0.2 \| MIT License \| git.io/normalize /html{font-family:sans-serif;.......

Rovnaký postup môžete kombinovať toľko samostatných štýlmi, ako potrebujete. Stačí umiestniť linky @import v "src/style.css" súbor kamkoľvek budete chcieť inlined kód musí byť vložený.

Automatické Bower komponentu a uzol modul vyhľadávanie

Jedna veľmi užitočná funkcia tohto pluginu je jeho schopnosť automaticky zistiť CSS súborov nachádzajúcich sa v priečinku "bower_components" alebo "node_modules".

Napríklad, skôr ako manuálne sťahovanie "normalize.css", ako sme vyššie, ste mohli namiesto stačí spustiť príkaz bower nainštalovať normalize.css--uložiť vo vašom projekte. To by automaticky stiahnuť najnovšie "normalize.css" súbor "bower_components/normalize.css" priečinok.

Poznámka: Ak nemáte Bower inštalácie na vašom počítači sa dozviete ako tu.

V hornej časti vašej stylopis, môžete teraz namiesto toho používať tento riadok:

1	@import 'normalize.css/normalize.css';

Postcss-import plugin bude vyzerať vo vnútri priečinka "bower_components" a nájsť "normalize.css", potom pokračujte inline to rovnako ako v predchádzajúcom príklade.

Rovnaký postup môže byť doplnené o všetky štýly, ktoré sú v priečinku "node_modules", čo znamená, môžete použiť buď Bower alebo npm zvládnuť sťahovanie, závislosť správy a aktualizácie. Pri použití oboch služieb tento plugin vám dáva jednoduchý spôsob kombinovania tretej strany CSS súborov do vlastné štýly.

Spôsoby, ako využiť @import Inlining

Inlining dovezené CSS súborov týmto spôsobom nie je nielen veľmi efektívny spôsob, ako skombinovať súbory z rôznych zdrojov, napríklad Bower komponenty, poskytuje tiež možnosť organizovať svoj projekt do viacerých samostatných štýlmi.

Napríklad, môžete vytvoriť jeden súbor na kontrolu rozloženia a druhý na kontrolu farebnú schému. Ak chcete zmeniť farebnú schému by postupujte procesu ako je tento:

Duplikát pôvodnej farby stylesheet
Upraviť nové farebné kódy
Import nových štýlov farieb do vášho projektu
Zostaviť vytvoriť alternatívne farebné stylesheet

Mohol potom opakujte tento postup toľkokrát, ako ste chcel, čo je efektívne vytvoriť viacero farebných schém pre rovnaký dizajn.

Niektoré projekty použiť samostatné štýly poskytnúť viacero farebných schém takhle, ale v procese vytvoriť spomalenie z pridanej http požiadavky. S týmto prístupom ste vždy skončiť s len jeden http žiadosť, napriek tomu, že veľa voľnosti v čo môžu byť zahrnuté v jednej šablóny so štýlmi.

Prečítajte si viac o postcss-import na: https://github.com/postcss/postcss-import

Kombinovať zodpovedajúce Media dotazov

Css-mqpacker plugin od Kyo Nagashima nájsť zodpovedajúce mediálne dotazy sa vaše štýlov a spojiť ich do jednej. Umožňuje usporiadať vaše CSS ako vás prosím v rozvoj štýlmi, opakujúce sa mediálne dotazy, ak potrebujete, bez obavy Akákoľvek strata efektívnosti vo vašej stylopis výroby.

Poďme dohromady príklad druhu použitia prípad keď budete chcieť zopakovať mediálne dotazy, ako keby ste organizovanie vášho návrhu rozloženia a vizuály samostatne. V projekte reálne by to mohlo znamenať pomocou úplne samostatné súbory, jeden pre rozloženie a jeden obraz, ale pre jednoduchosť budeme robiť to všetko v našom "src/style.css" súbor.

Začneme s niektorých kód rozloženie. Pridáme .column triedy, aby dve 50% šírky stĺpcov sedieť vedľa seba, v predvolenom nastavení. Potom použijeme media dotaz na ich zásobníka na vrchole každého iný v menších veľkostiach. Pridať tento kód do vašej šablóny so štýlmi:

/* LAYOUT */

.column {
    width: 50%;
	float: left;
}

@media (max-width: 50rem) {
	.column {
		width: 100%;
		float: none;
	}
}

Ďalej pridáme nejaké vizuálne nastavenie sivé orámovanie okolo našich stĺpce. Prvý stĺpec bude mať .column_one triedy a druhý bude mať .column_two triedy. Budeme používať rovnaký dotaz médií, ako sme to urobili s našej rozloženie neklientov ako sme použiť orámovanie pre naše stĺpce, podľa toho, či sedia vedľa seba alebo jedno nad druhým.

Pridať tento kód vašej stylopis aj:

/* VISUALS */

.column_one, .column_two {
    border: 0.0625rem solid #ccc;
}

.column_two {
	border-left: 0;
}

@media (max-width: 50rem) {
	.column_one, .column_two {
		border: 0.0625rem solid #ccc;
	}

	.column_two {
		border-top: 0;
	}
}

Teraz, rekompilovat svoje "src/style.css" súbor a pozrite sa na výslednej "dest/style.css" obsah.

Ako môžete vidieť na nižšie uvedený kód, css-mqpacker plugin má identifikované dva zhodné mediálne dotazy a kombinovať ich do jedného:

/* LAYOUT */

.column {
    width: 50%;
	float: left;
}

/* VISUALS */

.column_one, .column_two {
	border: 0.0625rem solid #ccc;
}

.column_two {
	border-left: 0;
}

@media (max-width: 50rem) {

	.column {
		width: 100%;
		float: none;
	}

	.column_one, .column_two {
		border: 0.0625rem solid #ccc;
	}

	.column_two {
		border-top: 0;
	}
}

Poznámka: Vyššie uvedený kód bude minified v "dest/style.css" súbor kvôli cssnano plugin. Ak chcete zobraziť kód unminified dočasne zakomentujte cssnano z Gulpfile alebo Gruntfile na procesory radu.

Prečítajte si viac o css-mqpacker v https://github.com/hail2u/node-css-mqpacker

cssnano Plugin Pack

Pre komplexný a mnohostranný CSS optimalizácia, cssnano pack od Ben Briggs je veľmi silný voľby, ale ten, ktorý je skoro plug and play. Združuje okolo dvadsaťpäť pluginy, a môže vykonať impozantný počet rôzne typy optimalizácia.

Okrem dlhého zoznamu o optimalizácie, môžete:

Strip medzery a konečné bodkočiarky
Odstrániť komentáre
Optimalizovať druhy fontu
Odstráňte duplicitné pravidlá
Optimalizovať využitie calc()
Minify selektory
Minimalizovať latinka objektov
Zlúčiť pravidlá

Budeme spracovávať nejaké napríklad kód vášho projektu, ktorý bude vidieť všetky vyššie optimalizácie uplatňovať.

Pridať tento kód do vašej "src/style.css" súbor:

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* This is an example of cssnano in action */
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

a {
	text-decoration: none;
	font-weight: bold;
}

p {
	font-weight: bold;
}

Potom překompilovat súbor.

Poznámka: možno budete chcieť zakomentujte akýkoľvek kód ste už mali, takže môžete jasne vidieť výsledky.

V "dest/style.css" súboru, mali by ste teraz vidieť optimalizovaný kód:

1	.css_nano,.css_nano+p,[class*=css_nano]{margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}a{text-decoration:none}a,p{font-weight:700}

Pozrite si zoznam o optimalizácie uvedených v guľka zozname vyššie, potom porovnať napríklad kód pred a po zostavení vidieť, ako každý jeden z týchto zmien sa uskutoční:

Medzery, pripomienky a konečné bodkočiarkou sú preč
Font-hmotnosť: normálne a font-weight: bold sa skonvertujú na font-hmotnosť: 400 a font-hmotnosť: 700
Druhý, opakovaný výskyt pravidlo font-hmotnosť: normálne; bola odstránená z .css_nano štýl
Vlastnosť calc() bola znížená na statické hodnoty
Selektory .css_nano, .css_nano + p, [trieda * = "css_nano"], .css_nano boli minified .css_nano, .css_nano + p [trieda * = css_nano]
Horný okraj latinka pre vlastnosti: 1rem; dolný okraj: 2rem; okraj-odišiel: 1.5rem; okraj-pravý: 2.5rem; boli znížené na rozpätie: 1rem 2.5rem 2rem 1.5rem;
A p štýly boli zlúčené zdieľať ich spoločné font-hmotnosť: 700; Nastavenie

Pre úplný zoznam o optimalizácie cssnano poskytuje Pozrite sa: https://cssnano.co/optimisations/

Konfigurácia možností a vypnutie modulov

Existuje niekoľko nezávislých pluginy zamestnaných cssnano pack, a možno budete chcieť nakonfigurovať nastavenia, alebo úplne zakázať, niektoré z nich.

Zakázať plugin, prejsť jeho meno v možnostiach cssnano s nastavením "false" uplatňovať. Napríklad, ak nechcete optimalizovať písmo závažia súbor v Gulpfile/Gruntfile nasledovné:

// In Gulpfile 'processors' array
cssnano({
    minifyFontWeight: false
})

// In Gruntfile 'processors' array
require('cssnano')({
    minifyFontWeight: false
})

Môžete sledovať rovnaký prístup Konfigurácia možností pre plugin, dávať meno plugin prvý potom nastavenie jeho možností.

Napríklad, môžete nastaviť presnosť (počet desatinných miest), calc plugin by mal použiť. Podľa predvoleného nastavenia calc (100% / 2,76) by vám 36.23188%. Ale ak by ste chceli skrátiť túto presnosť na dve desatinné miesta ste to takhle:

// In Gulpfile 'processors' array
cssnano({
    calc: {precision: 2}
})

// In Gruntfile 'processors' array
require('cssnano')({
    calc: {precision: 2}
})

Hodnotu calc by teraz výstup na 36.23%.

Pre viac info na cssnano možnosti navštíviť: http://cssnano.co/options

Rýchla rekapitulácia

Poďme si námety, čo sme sa vzťahuje vyššie:

Postcss-import plugin vám efektívny spôsob na inline štýly.
Možno kombinovať štýly tretích strán, vrátane auto-objav v priečinku "bower_components" alebo "npm_modules".
Možno sa aby ste mohli vaše stylesheets je rozdelený do častí, potom Skombinujte ich neskôr.
Css-mqpacker plugin umožňuje duplikovať mediálne dotazy, takže môžete organizovať vaše CSS ako prosím, vrátane do samostatných súborov, a potom mať všetky zodpovedajúce media dotazov v kombinácii sa vaše konečné štýlov.
Cssnano pack združuje okolo 25 rôznych pluginov, sprístupnením typu plug and play dlhý zoznam funkcií minification a optimalizácia.
To môže byť nakonfigurovaný použiť ktorékoľvek zahrnuté pluginy, ktoré chcete, s požadované možnosti.

Hore ďalšie: Predspracovanie s PreCSS

V budúcom tutoriále budem ponoríme do pomocou PostCSS pre predspracovanie cez výborný plugin pack s názvom PreCSS. Tento balík poskytuje okamžitý prístup k Sass syntaxou a funkcií, premenných, mixins, pole semaforov, rozširuje a ďalšie.

Uvidíme sa v budúcom tutoriále!