Použití PostCSS pro Minification a optimalizace

() translation by (you can also view the original English article)

V posledním kurzu naučili, jak používat PostCSS pomoci, aby vaše styly více cross prohlížeč kompatibilní, zejména co do činění s problémy vyplývající z podpory pro starší verze aplikace Internet Explorer.

V tomto kurzu budeme učit jak zefektivnit vaše styly a načítaly rychleji, pomocí PostCSS k provádění různých operací minification a optimalizace.

Dozvíte se jak:

Kombinovat více stylů do jednoho pomocí pravidlo @import, i když některé své styly přicházejí z Bower komponenty nebo npm moduly, zajistí vám třeba jen jediné http požadavku načtení stránek CSS.
Kombinovat, odpovídající média dotazů do jednoho, umožňuje používat stejný dotaz média na různých místech během vývoje, ale přesto nakonec s účinností konsolidované dotazů v konečné šablony stylů.
Pomocí cssnano pack provádět všechny druhy optimalizace stripovací mezery a komentáře k minifying určité typy kódu a mnoho dalšího.

Pojďme začít!

Váš projekt instalace

První věc, kterou budete muset udělat je nastavit projektu použít Gulp nebo Grunt, podle přání. Pokud ještě nemáte k jednomu nebo jiné jsem doporučujeme používat LOK, jak budete potřebovat méně kódu k dosažení stejných cílů, takže byste měli najít to trochu jednodušší práce s.

Si můžete přečíst o nastavení Gulp nebo Grunt projekty pro PostCSS v předchozí kurzy

PostCSS příručka: Douškem instalace nebo
PostCSS příručka: Grunt nastavení

respektive.

Pokud chcete ručně nastavit projekt od začátku když, můžete stáhnout zdrojové soubory připojené k tomuto kurzu a extrahovat buď zadaný Gulp nebo Grunt startovací projekt do složky prázdný projekt. Pak s terminálem nebo příkazového řádku odkazuje na složku pomocí příkazu nainstalovat npm.

Instalace pluginů

Pro účely tohoto návodu budeme používat dva jednotlivé pluginy, plus plugin pack. Je nainstalujte spuštěním následujícího příkazu uvnitř složky projektu:

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

Nyní jsou nainstalované pluginy, Pojďme do toho a nahrát je do projektu.

Nahrát pluginy přes Lok

Používáte-li Gulp, přidejte tyto proměnné podle proměnné již v souboru:

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

Nyní přidejte každý z těchto nových názvů proměnných do pole procesory:

    var processors = [
  	atImport,
		mqpacker,
		cssnano
	];

Proveďte rychlý test, který vše pracuje spuštěním příkazu douškem css pak kontrolu toho, že nové "style.css" soubor se objevil v "cíl" složky vašeho projektu.

Nahrát pluginy přes Grunt

Pokud používáte Grunt, aktualizujte procesory objekt, který je vnořen pod možnosti objektu, následující:

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

Proveďte rychlý test, který vše pracuje spuštěním příkazu grunt postcss pak kontrolu toho, že nové "style.css" soubor se objevil v "cíl" složky vašeho projektu.

To má všechny pluginy, které jsou nainstalovány a načten, takže jdeme na učení, jak je použít pro minification a optimalizace.

Soubory vložené/kombinovat s @import

Místo načítání individuálně více stylů, je efektivnější, pokud možno kombinovat své styly do jednoho.

Například použití Normalize.css je velmi časté, ale pokud jej položíte jako samostatný stylesheet před hlavní stylů, to vyžaduje více požadavků http, tedy zpomaluje čas načítání.

Však Pokud používáte plugin postcss-import od Maxime Thirouin, můžete kombinovat Normalize.css do své hlavní stylů, prostřednictvím využívání pravidla @import dává stejné CSS s pouze jeden http požadavku.

@import pak vložený Normalize.css

Pojďme do toho a udělat to teď, import a poté vkládání Normalize.css do našeho projektu šablony stylů. Začněte stažením "normalize.css" do složky vašeho projektu "src", z https://necolas.github.io/normalize.css/

V horní části vašeho "src/style.css" souboru přidejte následující řádek:

1	@import 'normalize.css';

Jak máte postcss-import nainstalován, to je vše, co musíte udělat. Bude to vidět pravidlo @import a automaticky vložený kód ze souboru normalize.css do vaší šablony stylů.

Zkompilujte soubor, a když se podíváte na své "dest/style.css" soubor, měli byste vidět celý obsah "normalize.css" v něm:

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

Stejným způsobem lze kombinovat tolik samostatných stylů, jak je třeba. Jen místo @import řádky ve vašem "src/style.css" souboru, kde chcete vložený kód, který má být vložen.

Součást automatické Bower a uzel modul zjišťování

Jeden velmi užitečné funkce tohoto pluginu je její schopnost automaticky zjistit CSS soubory umístěné uvnitř složky "bower_components" nebo "node_modules".

Například namísto ručně stáhnout "normalize.css", jako jsme to udělali výše, je by místo toho stačí spustit příkaz bower instalovat normalize.css – uložte ve vašem projektu. To by automaticky stahovat nejnovější "normalize.css" soubor do "bower_components/normalize.css" složku.

Poznámka: Pokud nemáte Bower nastavení na vašem počítači zjistěte, jak zde.

V horní části vaší šablony stylů můžete nyní místo toho použít tento řádek:

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

Zásuvný modul postcss-import bude vypadat uvnitř složky "bower_components" a najít "normalize.css", pak pokračujte na inline to stejně jako v předchozím příkladu.

Stejný postup lze postupovat pro všechny styly, které jsou ve složce "node_modules", což znamená, můžete použít buď Bower nebo npm zpracovat soubory ke stažení, závislost správy a aktualizace. Při použití buď služby tento plugin poskytuje snadný způsob kombinování souborů CSS třetích stran do vlastní předlohy se styly.

Způsoby, jak vliv @import vkládání

Vkládání importovány CSS souborů tímto způsobem není jen velice efektivní způsob kombinování souborů z různých zdrojů, například součásti Bower, nabízí také možnost uspořádání projektu do více samostatných stylů.

Například můžete vytvořit jeden soubor pro ovládání rozložení a druhý kontrolovat vaše barevné schéma. Pokud jste chtěli změnit barevné schéma můžete pak pomocí procesu jako je tento:

Duplicitní původní barvu stylů
Úprava s nové kódy barev
Importovat nové šablony stylů barev do projektu
Kompilace vytvořit alternativní barevné šablony stylů

Mohl pak opakujte tento postup tolikrát, jak jste chtěli, takže je efektivní vytvořit více barevných schémat pro stejný design.

Některé projekty využívají samostatné styly poskytnout více barevných schémat takhle, ale v procesu vytvoření zpomalení z přidané http požadavků. S tímto přístupem vždy skončíte s jediném http požadavku, přesto, že má hodně volnosti v co by mohlo být součástí jednoho stylu.

Přečtěte si více o postcss-import na: https://github.com/postcss/postcss-import

Kombinovat, odpovídající mediální dotazy

Css-mqpacker plugin od Kyo Nagashima vyhledá odpovídající multimediální dotazy ve vaší šabloně stylů a spojit je do jedné. To umožňuje uspořádat jak jste prosím v rozvoji styly, opakující se média dotazy, pokud je třeba, bez obavy ze ztráty účinnosti výroby stylů CSS.

Pojďme dát dohromady, příklad užití případ kde budete chtít opakovat dotazy na média, například pokud jste organizování vašeho návrhu rozložení a obraz odděleně. V reálném projektu to mohlo znamenat zcela samostatné soubory, jeden pro rozložení a jeden obraz, ale pro jednoduchost uděláme vše v našich "src/style.css" soubor.

Začneme s nějakým kódem rozložení. Přidáme .column třídu, která bude mít dva sloupce šířka 50 % sedí vedle sebe, ve výchozím nastavení. Pak použijeme multimediálního dotazu je zásobník na sebe v menší velikosti. Přidáte tento kód do vaší šablony stylů:

/* LAYOUT */

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

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

Dále přidáme nějaký obraz nastavit šedé ohraničení kolem naší sloupce. První sloupec bude mít třídy .column_one a druhý bude mít třídy .column_two. Budeme používat stejný dotaz média, jak jsme to udělali s naším rozložení změnit se jak jsme použít ohraničení na sloupy, podle toho, zda jsou to sedí vedle sebe nebo přes sebe.

Přidáte tento kód do vaší šablony stylů:

/* 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;
	}
}

Nyní znovu zkompilujte vaší "src/style.css" soubor a podívejte se na výsledný "dest/style.css" obsah.

Jak můžete vidět v následujícím kódu, css-mqpacker plugin má identifikovány dva odpovídající dotazy médií a spojil je do jednoho:

/* 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: Výše uvedený kód bude minified ve svém "dest/style.css" soubor cssnano plugin. Chcete-li zobrazit kód, nezmenšená, dočasně zakomentujte cssnano z Gulpfile nebo si Gruntfile procesorů řady.

Přečtěte si více o css-mqpacker na https://github.com/hail2u/node-css-mqpacker

cssnano Plugin Pack

Pro komplexní a mnohotvárné CSS Optimalizace cssnano pack Ben Briggs je velmi užitečnou možností, ale ten, který je skoro plug and play. To sdružuje kolem dvacet-pět pluginů a působivou řadu různých typů optimalizace můžete provést.

Mezi dlouhým seznamem optimalizace může:

Odstranit mezery a konečné středníky
Odstranit komentáře
Optimalizaci vah písma
Zahodit duplicitní pravidla
Optimalizovat, calc()
Minify voliče
Minimalizovat latinka – vlastnosti
Sloučení pravidel

Budeme zpracovávat některé příklad kódu v projektu, který se zobrazí všechny výše uvedené optimalizace použita.

Přidat tento kód do vaší "src/style.css" soubor:

.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;
}

Překompilujte váš soubor.

Poznámka: Chcete Zakomentovat jakýkoli kód již dříve, abyste jasně viděli výsledky.

Ve svém "dest/style.css" soubor nyní byste měli vidět optimalizovaného kódu:

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}

Si prohlédnout seznam optimalizací uvedených ve výše uvedeném seznamu s odrážkami a pak porovnejte příklad kódu před a po sestavení Chcete-li vidět, jak každý z nich z těchto změn se koná:

Prázdný znak, komentáře a konečné středníky jsou pryč
Font hmotnost: normální a font-weight: bold jsou převedeny na font hmotnost: 400 a font-weight: 700
Za druhé, opakované instance pravidla font hmotnost: normální; byla odebrána z stylu .css_nano
Vlastnost calc() byla snížena na hodnotu statické
Voliče .css_nano, .css_nano + p, [třída * = "css_nano"], .css_nano byla minified .css_nano, .css_nano + p, [třída * = css_nano]
Běžné písmo vlastnosti margin-top: 1rem; Margin-bottom: 2rem; Margin-left: 1.5rem; pravém okraji: 2.5rem; byly sníženy na okraj: 1rem 2.5rem 2rem 1.5rem;
A p styly spojily podělit jejich společný font hmotnost: 700; nastavení

Úplný seznam optimalizace poskytuje cssnano Podívejte se na: https://cssnano.co/optimisations/

Konfigurace možností a zakázání modulů

Existuje několik nezávislých pluginy zaměstnán cssnano pack a chcete nakonfigurovat nastavení pro, nebo zcela zakázat, některé z nich.

Chcete-li zakázat plugin, předejte jeho název v možnosti cssnano s nastavením, které "false". Například, pokud chcete optimalizovat Sada závaží písma v Gulpfile/Gruntfile následující:

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

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

Můžete sledovat stejný přístup ke konfiguraci možností pro zásuvný modul, uvede se název pluginu, nejprve pak nastavení jeho možností.

Například můžete nastavit přesnost (počet desetinných míst), calc plugin by měl použít. Ve výchozím nastavení calc (100 % / 2,76) by vám 36.23188 %. Ale pokud jste chtěli zkrátit tuto přesnost na dvě desetinná místa můžete to udělat takhle:

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

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

Hodnota calc by nyní výstup 36.23 %.

Další informace o možnostech cssnano navštivte: http://cssnano.co/options

Rychlá rekapitulace

Dáme si náměty jsme uvedené výše:

Postcss-import plugin dává efektivní způsob vložené styly.
Lze použít ke kombinování stylů třetích stran, mimo jiné prostřednictvím automatického vyhledávání ve složce "bower_components" nebo "npm_modules".
Lze použít k umožňují rozdělit své styly na části, pak se rekombinují později.
Css-mqpacker modul umožňuje duplikovat multimediální dotazy, takže si můžete uspořádat své CSS jak prosím, včetně do samostatných souborů a pak mít všechny odpovídající multimediální dotazy v kombinaci v konečné šablony stylů.
Cssnano pack spojuje kolem 25 různých pluginů, zpřístupňující technologie plug and play dlouhý seznam funkcí minification a optimalizace.
Může být nakonfigurován pro použití libovolné součástí pluginy, které chcete, s možnosti, které chcete.

Další snímek: Předzpracování s PreCSS

V dalším kurzu, které ponoření do použití PostCSS pro zpracováním prostřednictvím výborný plugin pack s názvem PreCSS. Tento balík poskytuje okamžitý přístup k Sass jako syntaxi a funkce, proměnné, traits varianty en:, podmínkové věty, rozšiřuje a mnoho dalšího.

Uvidíme se v příštím kurzu!