Share
In de laatste zelfstudie hebt u geleerd PostCSS te gebruiken om uw stylesheets beter compatibel te maken met meerdere browsers, met name als gevolg van problemen die voortvloeien uit de ondersteuning van oudere versies van IE.
In deze zelfstudie gaan we leren hoe u uw stylesheets efficiënter kunt maken en sneller kunt laden, door PostCSS te gebruiken voor verschillende minificatie- en optimalisatiebewerkingen.
Je leert hoe je:
Accentsconagua
@importeren regel, zelfs als sommige van uw stylesheets afkomstig zijn van Bower-componenten of npm-modules, zodat u zeker bent dat u slechts één single nodig heeft http verzoek om de CSS van uw site te laden.Laten we beginnen!
Het eerste dat u moet doen, is uw project instellen om Gulp of Grunt te gebruiken, afhankelijk van uw voorkeur. Als je nog geen voorkeur hebt voor Gulp, raad ik Gulp aan, omdat je minder code nodig hebt om dezelfde doelen te bereiken, dus je zou het wat eenvoudiger moeten vinden om met Gulp te werken.
U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
respectievelijk.
Als u uw project echter niet helemaal opnieuw wilt instellen, kunt u de bronbestanden downloaden die aan deze zelfstudie zijn gekoppeld en het meegeleverde Gulp- of Grunt-startersproject uitpakken in een lege projectmap. Voer vervolgens de opdracht uit met een terminal of opdrachtprompt die naar de map wijst npm installeren.
Voor deze zelfstudie gebruiken we twee individuele plug-ins en een plugin-pakket. Installeer ze door de volgende opdracht in uw projectmap uit te voeren:
npm installeer postcss-import css-mqpacker cssnano --save-dev
Nu de plug-ins zijn geïnstalleerd, laten we doorgaan en ze in uw project laden.
Als u Gulp gebruikt, voegt u deze variabelen toe onder de variabelen die al in het bestand staan:
var atImport = require ('postcss-import'); var mqpacker = require ('css-mqpacker'); var cssnano = require ('cssnano');Voeg nu elk van die nieuwe variabelenamen toe aan uw processors array:
var processors = [atImport, mqpacker, cssnano];
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren slok css controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Als u Grunt gebruikt, werk dan het processors object, dat is genest onder de opties object, naar het volgende:
processors: [require ('postcss-import') (), require ('css-mqpacker') (), require ('cssnano') ()]Voer een snelle test uit dat alles werkt door de opdracht uit te voeren grunt postcss controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Dat heeft alle plug-ins geïnstalleerd en geladen, dus laten we verder gaan met het leren hoe ze te gebruiken voor minificatie en optimalisatie.
In plaats van het afzonderlijk laden van meerdere stylesheets, is het efficiënter om waar mogelijk uw stylesheets samen te voegen.
Het gebruik van Normalize.css is bijvoorbeeld heel gebruikelijk, maar als u het als een op zichzelf staand stijlblad vóór uw hoofdstijlblad laadt, vereist dit meerdere http aanvragen, waardoor de laadtijd wordt vertraagd.
Als u echter de postcss-import-plugin van Maxime Thirouin gebruikt, kunt u Normalize.css combineren in uw hoofdstijlblad, via het gebruik van de @importeren regel, zodat je dezelfde CSS hebt met slechts één http verzoek.
Laten we doorgaan en dit nu doen, door Normalize.css te importeren en vervolgens in te voegen in de stylesheet van ons project. Begin met het downloaden van "normalize.css" in de map "src" van uw project, op https://necolas.github.io/normalize.css/
Voeg aan de bovenkant van uw "src / style.css" -bestand de volgende regel toe:
@import 'normalize.css';
Omdat postcss-import al is geïnstalleerd, hoeft u niets meer te doen. Het zal de @importeren regel en regel de code van het bestand normalize.css automatisch in uw stylesheet.
Compileer je bestand en als je naar je "dest / style.css" bestand kijkt, zou je de volledige inhoud van "normalize.css" daarin moeten zien:
/ *! normalize.css v3.0.2 | MIT-licentie | git.io/normalize * / html font-family: sans-serif; ...
U kunt ditzelfde proces gebruiken om zoveel afzonderlijke stylesheets te combineren als u wilt. Gewoon plaatsen @importeren regels in uw "src / style.css" -bestand waar u de ingevoegde code wilt invoegen.
Een zeer nuttige functie van deze plug-in is de mogelijkheid om automatisch CSS-bestanden te vinden die zich in de map "bower_components" of "node_modules" bevinden.
Bijvoorbeeld, in plaats van het handmatig downloaden van "normalize.css" zoals we hierboven deden, kon je in plaats daarvan gewoon de opdracht uitvoeren prieel installeren normalize.css - opslaan in je project. Hiermee wordt het nieuwste bestand "normalize.css" automatisch gedownload naar de map "bower_components / normalize.css".
Notitie: Als u de installatie van Bower op uw computer niet hebt, lees dan hier.
Bovenaan je stylesheet kun je nu deze regel gebruiken:
@import 'normalize.css / normalize.css';
De invoegtoepassing postcss-importeert zich in de map "bower_components" en zoekt naar "normalize.css". Vervolgens gaat u naar de inline-versie net als in het vorige voorbeeld.
Hetzelfde proces kan worden gevolgd voor alle stylesheets die zich in de map "node_modules" bevinden, wat betekent dat u Bower of npm kunt gebruiken om downloads, het beheer van afhankelijkheden en updates af te handelen. Wanneer u een van deze services gebruikt, kunt u met deze plug-in eenvoudig CSS-bestanden van derden in uw eigen stylesheets combineren.
Het op deze manier inlassen van geïmporteerde CSS-bestanden is niet alleen een zeer efficiënte manier om bestanden uit verschillende bronnen te combineren, zoals Bower-componenten, maar het biedt u ook de mogelijkheid om uw project in meerdere afzonderlijke stylesheets te organiseren.
U kunt bijvoorbeeld één bestand maken om uw lay-out te beheren en een ander om uw kleurenschema te beheren. Als u uw kleurenschema wilt wijzigen, kunt u een proces als dit volgen:
U kunt dit proces zo vaak herhalen als u wilde, waardoor het efficiënt wordt om meerdere kleurenschema's te maken voor hetzelfde ontwerp.
Sommige projecten maken gebruik van afzonderlijke stylesheets om meerdere kleurenschema's zoals deze te bieden, maar maken in dit proces vertragingen bij toevoegen http verzoeken. Met deze aanpak eindig je altijd met slechts één http verzoek, ondanks dat u veel vrijheid hebt in wat er in uw afzonderlijke stylesheet zou kunnen staan.
Lees meer over postcss-import op: https://github.com/postcss/postcss-import
De css-mqpacker-plug-in van Kyo Nagashima vindt overeenkomende mediaquery's in uw stylesheet en combineert ze tot één. Dit stelt u in staat uw CSS te organiseren zoals u wilt in uw ontwikkel stylesheets, het herhalen van mediaquery's als dat nodig is, zonder zorgen over verlies van efficiëntie in uw productiestijlenblad.
Laten we een voorbeeld samenstellen van het type gebruik waarin u mogelijk mediaquery's wilt herhalen, bijvoorbeeld als u de lay-out en visuals van uw ontwerp afzonderlijk indient. In een echt project kan dit betekenen dat je volledig afzonderlijke bestanden gebruikt, een voor lay-out en een voor visuals, maar omwille van de eenvoud doen we dit allemaal in ons "src / style.css" -bestand.
We beginnen met een layout-code. We voegen een toe .kolom klas die er twee zal worden 50% breedtegroepen zitten standaard naast elkaar. Vervolgens gebruiken we een mediaquery om ze op kleinere formaten op elkaar te laten stapelen. Voeg deze code toe aan uw stylesheet:
/ * LAYOUT * / .column width: 50%; zweven: links; @media (max-width: 50rem) .column width: 100%; zweven: geen;
Vervolgens voegen we enkele afbeeldingen toe om een grijze rand rondom onze kolommen in te stellen. De eerste kolom heeft de klasse .column_one en de tweede heeft de klas .column_two. We gaan dezelfde mediaquery gebruiken als bij onze lay-out om de manier waarop we een rand toepassen op onze kolommen te wijzigen, afhankelijk van of ze naast elkaar of boven elkaar staan.
Voeg deze code ook toe aan uw stylesheet:
/ * 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;
Hercompileer nu je "src / style.css" -bestand en bekijk de resulterende "dest / style.css" -inhoud.
Zoals u in de onderstaande code kunt zien, heeft de css-mqpacker-plug-in de twee overeenkomende mediaquery's geïdentificeerd en in één gecombineerd:
/ * LAYOUT * / .column width: 50%; zweven: links; / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (max-width: 50rem) .column width: 100%; zweven: geen; .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Notitie: De bovenstaande code wordt verkleind in je "dest / style.css" -bestand vanwege de cssnano-plug-in. Om de code niet meer te zien, tikt u tijdelijk uit cssnano van je Gulpfile of Gruntfile's processors rangschikking.
Lees meer over css-mqpacker op https://github.com/hail2u/node-css-mqpacker
Voor uitgebreide en veelzijdige CSS-optimalisatie is het cssnano-pakket van Ben Briggs een zeer krachtige optie, maar toch eentje die vrij veel plug en play is. Het brengt ongeveer vijfentwintig plug-ins samen en kan een indrukwekkend aantal verschillende soorten optimalisatie uitvoeren.
Onder een lange lijst van optimalisaties, kan het:
calc () gebruikWe gaan enkele voorbeeldcodes in uw project verwerken die alle bovenstaande optimalisaties zullen toepassen.
Voeg deze code toe aan uw "src / style.css" bestand:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Dit is een voorbeeld van cssnano in actie * / font-weight: normal; margin-top: 1rem; margin-bottom: 2rem; marge links: 1,5 rem; margin-right: 2,5rem; font-gewicht: normaal; opvulling: 1.75rem; breedte: calc (50rem - (2 * 1,75 rem)); een text-decoration: none; lettertype: vet; p font-weight: bold;
Recompileer vervolgens uw bestand.
Notitie: misschien wilt u commentaar geven op elke code die u al had, zodat u de resultaten duidelijk kunt zien.
In je "dest / style.css" -bestand zou je nu de geoptimaliseerde code moeten zien:
.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
Bekijk de lijst met optimalisaties die in de bovenstaande lijst met bulletins wordt vermeld en vergelijk de voorbeeldcode voor en na de compilatie om te zien hoe elk van deze wijzigingen plaatsvindt:
lettertype: normaal en lettertype: vet worden geconverteerd naar lettertype: 400 en font-gewicht: 700 font-gewicht: normaal; is verwijderd uit de .css_nano stijlcalc () eigenschap is teruggebracht tot een statische waarde.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano zijn verkleind naar .css_nano, .css_nano + p, [class * = css_nano] margin-top: 1rem; margin-bottom: 2rem; marge links: 1,5 rem; margin-right: 2,5rem; zijn teruggebracht tot marge: 1rem 2,5rem 2rem 1,5rem; een en p stijlen zijn samengevoegd om hun gemeenschappelijk te delen font-gewicht: 700; omgevingVoor een volledige lijst van optimalisaties biedt cssnano check-out: http://cssnano.co/optimisations/
Er zijn verschillende onafhankelijke plug-ins die door het cssnano-pakket worden gebruikt en het kan zijn dat u instellingen wilt configureren voor sommige of volledig uitschakelen, sommige.
Om een plug-in uit te schakelen, geeft u de naam door in uw opties voor cssnano met de instelling "false" toegepast. Als u bijvoorbeeld het lettertype niet wilt optimaliseren, stelt u het volgende in uw Gulpfile / Gruntfile in:
// In de array 'processors' van Gulpfile cssnano (minifyFontWeight: false) // In Gruntfile vereist de array van processors ('cssnano') (minifyFontWeight: false)U kunt dezelfde aanpak volgen om opties voor een plug-in te configureren, eerst de naam van de plug-in te geven en vervolgens de opties in te stellen.
U kunt bijvoorbeeld de precisie (aantal decimalen) instellen die de calc-plug-in moet gebruiken. Standaard calc (100% / 2,76) zou je geven 36,23188%. Maar als je die precisie tot op twee decimalen wilt verkleinen, zou je het als volgt kunnen doen:
// In de array 'processors' van Gulpfile cssnano (calc: precision: 2) // In Gruntfile vereist de array van processors ('cssnano') (calc: precision: 2)De calc-waarde wordt nu uitgevoerd naar 36.23%.
Ga voor meer informatie over cssnano-opties naar: http://cssnano.co/options
Laten we een overzicht hebben van wat we hierboven hebben behandeld:
In de volgende tutorial duiken we in het gebruik van PostCSS voor preprocessing via een uitstekend plug-pack genaamd PreCSS. Dit pakket geeft directe toegang tot Sass-achtige syntaxis en functionaliteit, met variabelen, mixins, conditionals, uitbreidingen en meer.
Tot ziens in de volgende zelfstudie!
