Share
I den senaste handledningen lärde du dig hur du använder PostCSS för att göra dina stylesheets mer kompatibla med webbläsare, speciellt hantera problem som uppstår genom stöd för äldre versioner av IE.
I denna handledning kommer vi att lära oss hur du gör dina stylesheets effektivare och laddas snabbare, genom att använda PostCSS för att utföra olika minifunktions- och optimeringsoperationer.
Du lär dig hur man:
Accentsconagua
@importera regel, även om några av dina stylesheets kommer från Bower-komponenter eller npm-moduler, så att du behöver bara en enda http Be om att ladda din webbplats CSS.Låt oss börja!
Det första du behöver göra är att ställa in ditt projekt för att använda antingen Gulp eller Grunt, beroende på vad du föredrar. Om du inte redan föredrar en eller annan, rekommenderar jag att du använder Gulp eftersom du behöver mindre kod för att uppnå samma ändamål, så du borde hitta det lite enklare att arbeta med.
Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
respektive.
Om du inte vill installera ditt projekt manuellt från början, kan du ladda ner källfilerna som bifogas denna handledning och extrahera antingen det angivna Gulp eller Grunt-startprojektet i en tom projektmapp. Sedan kör kommandot med en terminal eller kommandotolk som pekas på mappen npm installera.
För den här handledningen kommer vi att använda två individuella plugins, plus ett plugin-paket. Installera dem genom att köra följande kommando i din projektmapp:
npm installera postcss-import css-mqpacker cssnano - save-dev
Nu är plugins installerade, låt oss gå och ladda dem till ditt projekt.
Om du använder Gulp, lägg till dessa variabler under de variabler som redan finns i filen:
var atImport = kräver ("postcss-import"); var mqpacker = kräver ('css-mqpacker'); var cssnano = kräver ('cssnano');Lägg nu till var och en av de nya variabla namnen i din processorer array:
var-processorer = [vidImport, mqpacker, cssnano];
Gör ett snabbt test att allt fungerar genom att köra kommandot gulp css Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Om du använder Grunt, uppdatera processorer objekt som är nestat under alternativ objekt till följande:
processorer: [kräver ('postcss-import') (), kräver ('css-mqpacker') (), kräver ('cssnano') ()]Gör ett snabbt test att allt fungerar genom att köra kommandot grunt postcss Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Det har alla plugins installerade och laddade, så låt oss gå vidare med att lära sig hur de ska användas för minifiering och optimering.
Istället för att individuellt ladda flera stylesheets, är det mer effektivt, om möjligt, att kombinera dina stylesheets till en.
Till exempel är användningen av Normalize.css mycket vanligt, men om du laddar den som ett fristående formatark före ditt huvudformat, krävs det flera http förfrågningar, vilket saktar avlastningstiden.
Men om du använder Postcss-Import-plugin från Maxime Thirouin, kan du kombinera Normalize.css till ditt huvudsakliga stilark, via användningen av @importera regel, vilket ger dig samma CSS med bara en http begäran.
Låt oss fortsätta och göra det nu, importera och sedan inline Normalize.css i vårt projekt stilark. Börja med att hämta "normalize.css" i projektets "src" -mapp, från https://necolas.github.io/normalize.css/
Lägg till följande rad högst upp i filen "src / style.css":
@import 'normalize.css';
Eftersom du redan har postcss-import installerat, är det allt du behöver göra. Det kommer att se @importera reglera och automatiskt inline koden från filen normalize.css i ditt stilark.
Kompilera din fil, och när du tittar på din "dest / style.css" -fil bör du se hela innehållet i "normalize.css" där:
/ *! normalize.css v3.0.2 | MIT-licens | git.io/normalize * / html font-family: sans-serif; ...
Du kan använda samma process för att kombinera så många separata stilark som du behöver. Bara placera @importera rader i din "src / style.css" -fil där du vill att den inline-koden ska infogas.
En mycket hjälpsam funktion i det här pluginet är dess förmåga att automatiskt upptäcka CSS-filer som ligger i din mapp "bower_components" eller "node_modules".
Till exempel, istället för att manuellt ladda ner "normalize.css" som vi gjorde ovan, kan du istället bara köra kommandot bower installera normalize.css - save i ditt projekt. Detta hämtar automatiskt den senaste filen "normalize.css" i mappen "bower_components / normalize.css".
Notera: Om du inte har Bower-inställning på din dator lära dig hur här.
Överst i ditt stylesheet kan du istället använda den här raden:
@import 'normalize.css / normalize.css';
Postcss-import-plugin kommer att se in i mappen "bower_components" och hitta "normalize.css", fortsätt sedan till inline den precis som i föregående exempel.
Samma process kan följas för alla stylesheets som finns i mappen "node_modules", vilket betyder att du kan använda antingen Bower eller npm för att hantera nedladdningar, beroendehantering och uppdateringar. När du använder antingen tjänst ger det här pluginet ett enkelt sätt att kombinera CSS-filer från tredje part till dina egna stylesheets.
Inlining av importerade CSS-filer på detta sätt är inte bara ett mycket effektivt sätt att kombinera filer från olika källor, till exempel Bower-komponenter, det ger dig också möjlighet att organisera ditt projekt i flera separata stylesheets.
Du kan till exempel skapa en fil för att styra din layout och en annan för att kontrollera ditt färgschema. Om du vill ändra ditt färgschema kan du sedan följa en process som denna:
Du kan sedan upprepa denna process så många gånger du vill, vilket gör det effektivt att skapa flera färgscheman för samma design.
Vissa projekt använder separata stylesheets för att ge flerfärgsschemor så här, men i processen skapas avmattning från tillagt http förfrågningar. Med detta tillvägagångssätt slutar du alltid med bara en http begär, trots att ha mycket frihet i vad som kan inkluderas i ditt enkla format.
Läs mer om postcss-import på: https://github.com/postcss/postcss-import
Css-mqpacker-plugin från Kyo Nagashima hittar matchande mediafrågor i ditt stilark och kombinerar dem i en. Detta gör att du kan organisera din CSS hur du vill ha det i dina utvecklingsstilarker, upprepa mediafrågor om du behöver, utan att oroa dig för eventuella förluster i ditt produktionsstilark.
Låt oss sammanställa ett exempel på typen av användningsfall där du kanske vill repetera mediefrågor, till exempel om du organiserar din designs layout och visuella bilder separat. I ett verkligt projekt kan det här innebära att du använder helt separata filer, en för layout och en för visuella men för enkelhets skull gör vi allt i vår "src / style.css" -fil.
Vi börjar med en layoutkod. Vi lägger till en .kolumn klass som kommer att göra två 50% breddspilar sitter sida vid sida, som standard. Då använder vi en mediefråga för att få dem att stack ovanpå varandra i mindre storlekar. Lägg till den här koden i ditt stilark:
/ * LAYOUT * / .kolumn bredd: 50%; flyta till vänster; @media (maxbredd: 50rem) .kolumn bredd: 100%; float: none;
Därefter lägger vi till några visuella bilder för att ange en grå kant runt våra kolumner. Den första kolumnen kommer att ha klassen .column_one och den andra kommer att ha klassen .column_two. Vi ska använda samma mediefråga som vi gjorde med vår layout för att ändra hur vi tillämpar en gräns för våra kolumner beroende på om de sitter sida om sida eller en ovanpå varandra.
Lägg till den här koden i ditt stilark också:
/ * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (maxbredd: 50rem) .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Kompilera nu din "src / style.css" -fil och kolla på det resulterande "dest / style.css" -innehållet.
Som du kan se i koden nedan har css-mqpacker-plugin identifierat de två matchande mediafrågorna och kombinerat dem till en:
/ * LAYOUT * / .kolumn bredd: 50%; flyta till vänster; / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (maxbredd: 50rem) .kolumn bredd: 100%; float: none; .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Notera: Ovanstående kod kommer att minifieras i din "dest / style.css" -fil på grund av cssnano-plugin. Om du vill se koden som inte har tagits bort, kommenterar du tillfälligt cssnano från din Gulpfile eller Gruntfile s processorer array.
Läs mer om css-mqpacker på https://github.com/hail2u/node-css-mqpacker
För omfattande och mångfacetterad CSS-optimering är cssnano-paketet från Ben Briggs ett mycket kraftfullt alternativ, men en som är ganska plug och play. Den samlar omkring tjugofem plugins och kan utföra ett imponerande antal olika typer av optimering.
Bland en lång lista över optimeringar kan den:
calc () använda sig avVi ska behandla några exempelkod i ditt projekt som kommer att se alla ovanstående optimeringar som tillämpas.
Lägg till den här koden i din "src / style.css" -fil:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Detta är ett exempel på cssnano i åtgärd * / font-weight: normal; margin-top: 1rem; marginalbotten: 2rem; marginal-vänster: 1.5rem; marginal-höger: 2,5rem; typsnitt: normal; vaddering: 1,75rem; bredd: calc (50rem - (2 * 1,75rem)); en text-decoration: none; font-weight: bold; p font-weight: bold;
Kompilera sedan din fil.
Notera: Du kanske vill kommentera vilken kod du redan har, så du kan tydligt se resultaten.
I din "dest / style.css" -fil ska du nu se den optimerade koden:
.css_nano, .css_nano + p, [class * = css_nano] margin: 1rem 2.5rem 2rem 1.5rem; typsnittsvikt: 400; polstring: 1,75rem; bredd: 46,5rem en textdekoration: ingen a, p font-weight: 700
Titta igenom listan över optimeringar som nämns i punktlistan ovan, jämför sedan exemplet kod före och efter sammanställningen för att se hur var och en av dessa ändringar sker:
typsnitt: normal och font-weight: bold omvandlas till font-vikt: 400 och typsnitt: 700 typsnitt: normal; har tagits bort från .css_nano stilcalc () egenskapen har reducerats till ett statiskt värde.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano har minskats till .css_nano, .css_nano + p, [klass * = css_nano] margin-top: 1rem; marginalbotten: 2rem; marginal-vänster: 1.5rem; marginal-höger: 2,5rem; har minskat till marginal: 1rem 2.5rem 2rem 1.5rem; en och p stilar har blivit sammanslagna för att dela sina gemensamma font-vikt: 700; miljöFör en fullständig lista över optimeringar tillhandahåller cssnano checka ut: http://cssnano.co/optimisations/
Det finns flera oberoende plugins som används av cssnano-paketet, och du kanske vill konfigurera inställningar för eller helt avaktivera några av dem.
För att inaktivera ett plugin, skicka ditt namn i dina alternativ för cssnano med inställningen "false" applied. Om du till exempel inte vill optimera fontviktar anger du följande i din Gulpfile / Gruntfile:
// I Gulpfile-processorns array cssnano (minifyFontWeight: false) // I Gruntfile kräver processorns array ('cssnano') (minifyFontWeight: false)Du kan följa samma tillvägagångssätt för att konfigurera alternativ för ett plugin, vilket ger namnet på plugin-enheten först och ställer in alternativen.
Till exempel kan du ange precisionen (antal decimaler), beräkningspluggen ska använda. Som standard calc (100% / 2,76) skulle ge dig 36,23188%. Men om du ville trimma den precisionen i två decimaler kan du göra det så:
// I Gulpfile-processorns array cssnano (calc: precision: 2) // I Gruntfile kräver processorns array ('cssnano') (calc: precision: 2)Beräkningsvärdet skulle nu matas ut till 36,23%.
För mer information om cssnano alternativ besök: http://cssnano.co/options
Låt oss få en översikt över vad vi täckte ovan:
I nästa handledning dyker vi in med PostCSS för förbehandling via ett utmärkt plugin-paket med namnet PreCSS. Detta paket ger omedelbar tillgång till Sass-liknande syntax och funktionalitet, med variabler, mixins, conditionals, sträcker sig och mer.
Vi ses i nästa handledning!
