Share
Som webbdesigner finns tre språk du är ganska säker på att arbeta med ett eller annat sätt: CSS, HTML och JavaScript. I denna handledning kommer du att utnyttja kommandoraden för att göra din utveckling med dessa tre språk mer kraftfull och effektivare.
Du lär dig att använda kommandoraden till:
Notera: Denna handledning förutsätter att du redan har genomfört de tidigare handledningarna i den här serien. Om du inte har det, hittar du det bra att gå tillbaka och följa dem innan du fortsätter.
Om du aldrig har arbetat med CSS preprocessorer innan du släpper allt omedelbart och prova en. När du väl har hittat en förprocessor som du tycker om passar din kodningsstil, är det troligt att du aldrig kodar i rå CSS igen.
De tre förprocessorer som generellt anses vara de att välja mellan är Stylus, Sass / SCSS och LESS. Tuts + har ett fantastiskt utbud av handledning och kurser för att hjälpa dig att lära dig att skriva i syntaxen för alla tre förprocessorer.
I denna handledning kommer vi att täcka hur du kan använda kommandoraden för att kompilera kod för var och en av de tre.
Varje preprocessor-användare har en favorit, och min är Stylus. Den använder en minimal syntax som kan skrivas mycket snabbt, har mycket kraftfull funktionalitet och stöds av stora tredjepartsbibliotek som Jeet och Kouto-Swiss.
Du kan läsa allt om Stylus på: http://stylus-lang.com/
Om du vill installera Stylus globalt, så att du kan använda den för att kompilera ".styl" -filer var som helst, kör det här kommandot:
[sudo] npm installera stylus -g
Det enklaste sättet att kompilera med Stylus är att använda det här kommandot:
nål < example.styl > example.css
Detta kommando kommer att kompilera "example.styl" i "example.css" i samma katalog.
För att bryta ner det har vi nål för att starta kommandot. Då använder vi en < example.styl för att indikera Stylus-inmatningsfilen följt av > example.css för att ange namnet på den CSS-fil vi vill ha skapat.
Du har också möjlighet att lägga till ytterligare flaggor till det här kommandot, till exempel genom att använda --komprimera flagga för att ta bort whitespace från den resulterande CSS-filen:
stylus - komprimera < example.styl > example.css
Som ett alternativ till att sammanställa en fil i taget kan du sammanställa alla Stylus-filer i en katalog till CSS-filer i en annan katalog. För att göra detta, efter nål kommando, ange källkatalogen och använd sedan --ut flagga följt av målmappen.
Till exempel, för att kompilera alla Stylus-filer från en mapp med namnet "source_files" till "assets / css" använd:
stylus source_files - ur tillgångar / css
Notera: mappen du sammanställer måste redan finnas innan du kör kommandot eftersom det kommer att misslyckas om det inte går att hitta den angivna mappen för att mata ut CSS-filer till.
Det finns flera andra alternativ du kan utnyttja när du använder Stylus via kommandoraden. För att läsa allt om dem besök: http://stylus-lang.com/docs/executable.html
Sass är mycket sannolikt den mest populära förbehandlaren vid denna tidpunkt. Det är oerhört kraftfullt i vad du kan uppnå med det och har ett mycket stort och aktivt samhälle. Det stöds av välkända tredjepartsbibliotek som Compass, Bourbon och Susy.
Läs mer om Sass på: http://sass-lang.com/
Du har två alternativ när det gäller att samla Sass på din maskin: du kan antingen använda Ruby för att hantera det, eller du kan använda LibSass.
Sass skapades först för att springa på Ruby, och som sådan om du letar efter 100% fullständig funktion fullständighet och support, är det det alternativ du kanske vill välja. Om du till exempel vill använda Compass är det enklaste sättet att hålla fast vid Ruby-kompilering.
LibSass skapades som ett alternativ, och ett av de alternativ som det gör är att kompilera sass via ett npm-paket istället. Detta tillvägagångssätt kompilerar sass mycket snabbare, vilket ger en sammanställningstid på cirka 5 sekunder genom Ruby till under en halv sekund genom LibSass. Du kan dock hitta vissa funktioner och tredjepartskod stöds inte.
Vilket du väljer är helt ned till personliga preferenser, men som tumregel skulle jag föreslå att jag skulle gå med LibSass för snabbhet om det inte finns något specifikt (som Kompass) för vilken du behöver Ruby-kompilering.
Oavsett ditt val täcker vi med båda, så är du helt och hållet inställd i båda händelserna.
För att kompilera Sass via Ruby måste du först ha Ruby installerad på din maskin.
Om du är på Mac har du tur eftersom Ruby redan kommer förinstallerad så att du inte behöver göra något.
Om du är på Windows, gå till http://rubyinstaller.org/ och ladda ner och kör installationsprogrammet du hittar där. Installera sedan Sass genom att köra det här kommandot:
[sudo] gem install sass
Sass bör automatiskt hämtas och installeras för dig. För att dubbelkontrollera installationen har lyckats kör kommandot:
sass -v
Du bör se versionsnumret och namnet på din Sass-installation som visas i din terminal:
För att kompilera en fil med Ruby sass skriver du bara in sass, följt av namnet på inmatningsfilen, ett mellanslag, då namnet du vill att din sammanställda CSS-fil ska ha:
sass source_file.scss compiled_file.css
Ruby Sass har också en inbyggd "watch" -funktion (vi kommer att täcka mer om att titta senare) som kommer att titta på dina filer för ändringar och automatiskt omkompilera dem varje gång de sparas.
För att använda det, lägg till --Kolla på flagga till ditt kommando, separera sedan namnen på din källa och sammanställd fil med ett kolon istället för ett mellanslag:
sass - watch source_file.scss: compiled_file.css
Du kan också ange hela kataloger att titta på och att utföra till, i stället för enstaka filer, så här:
sass - klockkälla / sass: tillgångar / css
När tittandet är igång bör du se något så här i din terminal:
För att läsa om alla tillgängliga alternativ via kommandoraden med Ruby Sass run:
sass - hjälp
En läsning av kommandoradsdokumenten visas i din terminal:
Du kan använda detta --hjälp flagga för att få mer information om vilket kommando du använder. Skriv bara namnet på kommandot följt av --hjälp och du får information som liknar ovanstående i varje enskilt fall.
Om du går med LibSass kan du komma igång med samma metod som du har använt för att installera npm-paket tidigare i denna handledningsserie.
LibSass själv är skrivet i C / C ++ men det finns olika implementeringar av det, inklusive några gjort för att arbeta med Node.js. I vårt fall använder vi paketet nod-sass.
För att installera nod-sass globalt, kör det här kommandot:
[sudo] npm installera nod-sass -g
Att kompilera en filtyp nod-sass följt av namnet på inmatningsfilen och namnet du vill att din sammanställda CSS-fil ska ha:
node-sass source_file.scss compiled_file.css
För att styra katalogen din CSS-fil sammanställs till lägg till --produktion flagga och målkatalog mellan namnen på dina inmatnings- och utdatafiler:
node-sass source_file.scss --output assets / css compiled_file.css
Liksom Ruby Sass använder node-sass också --Kolla på flagga för att möjliggöra automatisk samling av dina filer vid förändring:
node-sass -watch source_file.scss compiled_file.scss
Du kan också ange hela kataloger att titta på, och att exportera till, istället för enskilda filer:
node-sass -watch källa / sass / * --output assets / css
När du använder node-sass för att titta på en hel katalog, var noga med att inkludera / * i slutet för att ange att du vill ha alla filerna inom.
När du har en "klocka" -process kan du stoppa den med antingen:
Den mindre förprocessorn är också mycket populär, och är förmodligen mest känd för sin anställning i Twitter Bootstrap-ramen. MINDER är en bra första förprocessor för att börja jobba med, eftersom det är mycket lik skrivning i rak CSS.
Läs mer om LESS på: http://lesscss.org/
För att installera mindre globalt, så att du kan använda den för att kompilera ".lösa" filer var som helst, kör det här kommandot:
[sudo] npm installera mindre -g
Öppna en terminal i mappen med den MINDRE filen du vill kompilera och använd kommandot lessc följt av filens namn, a > symbol, då namnet du vill att din sammanställda CSS-fil ska ha:
lessc source_file.less> compiled_file.css
Autoprefixer är ett npm-paket som kontrollerar med CanIUse.com för att få aktuell information om vilka CSS-egenskaper som behöver leverantörs prefix och vilka som inte gör det. Det hanterar sedan automatiskt att du lägger till nödvändiga leverantörs prefix i din kod.
Det här kan vara oerhört användbart som om du inte övervakar webbläsaruppdateringar hela tiden kan du enkelt hitta dig själv, inklusive webbläsarprefix som du inte behöver behöver längre. Det betyder också att du kan skriva all din CSS utan att behöva tänka på prefix och låta Autoprefixer ta hand om dem för dig.
Till exempel kommer autoprefixer att vända den här koden:
en display: flex;
... till detta:
en display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
Läs mer om Autoprefixer på: https://www.npmjs.com/package/autoprefixer
Installera Autoprefixer globalt med:
[sudo] npm installera autoprefixer -g
För autoprefix en CSS-fil använd följande kommando:
autoprefixer style.css
Till skillnad från att du sammanställer en förprocessorfil skapar det inte en andra fil som standard. Filen du riktar in uppdateras, med rätt prefix läggs till direkt.
Om du do vill att Autoprefixer ska generera en sekund, separat fil lägg till --produktion flagga följt av ett namn för din prefixed css-fil:
autoprefixer unprefixed.css --output prefixed.css
Du vill alltid ha den CSS du distribuerar på dina webbplatser för att knackas ner till den minsta möjliga storleken. För att uppnå detta kan du använda optimeringstekniker av:
Stylus, Ruby Sass och node-sass har alla förmåga att komprimera din CSS under sammanställning.
I Stylus, inkludera --komprimera flagga:
stylus - komprimera < source_file.scss > compiled_file.css
I Ruby Sass ingår --stil flagga följt av komprimerad:
sass source_file.scss compiled_file.css - stil komprimerad
I nod-sass lägg till --output-stil flagg följt av komprimerad:
node-sass -output-stil komprimerad source_file.scss compiled_file.css
Om du inte använder CSS-förprocessorer, eller om du bara vill ha maximal kodoptimering, kan du använda ren-css-paketet som kommer att sätta dina CSS-filer genom mer djupgående komprimeringsprocesser.
Regelbundna komprimeringsprocesser tar normalt bara bort vitt utrymme och kommentarer från din CSS. Clean-css-paketet å andra sidan kan också göra saker som:
Sammanslagning av duplicerade selektorer kan vara praktiskt, om du till exempel vill ha alla layouter för en viss klass i början i en "layout.css" -fil, medan färgningen för samma klass ursprungligen finns i en "colors.css".
Avrunda nummer är bra för när du har använt en förprocessor funktion för att konvertera ett värde till rem enheter och du hamnar med något som 2.3649858573rem. Med clean-css skulle numret avrundas till två decimaler, vilket ger det till ett mycket tidigare 2,36rem värde.
Du kan läsa mer om clean-css på: https://github.com/jakubpawlowicz/clean-css
Installera clean-css globalt med kommandot:
[sudo] npm installera clean-css -g
Att rengöra en CSS-filanvändning:
cleancss style.css
Notera: Även om paketnamnet "clean-css" har en bindestreck i det, var noga med att använda den cleancss utan en bindestreck för att starta dina kommandon.
För att ange ett nytt filnamn för clean-css för att generera användningen av -o flaggan följt av det nya filnamnet, före namnet på den fil du riktar in på:
cleancss -o cleaned.css style.css
Det finns flera andra kommandotillgängliga för clean-css, som du kan läsa allt om på: Hur man använder Clean CSS CLI.
Jade är ett fantastiskt språk som kompilerar till HTML och gör det möjligt för dig att både skriva din kod i stenografi så att utvecklingen är mycket snabbare och skapa egna templeringssystem så att du kan spara dig på omskrivningskoden.
Läs mer om Jade på: https://www.npmjs.com/package/jade
För att installera Jade kör globalt kommandot:
[sudo] npm installera jade -g
Jade, skapad av samma person som Stylus, använder samma grundläggande kommandosyntax av < och > tecken för att sammanställa en fil:
jade < index.jade > index.html
Detta kommando kommer att sammanställa "index.jade" till "index.html" i samma katalog.
För att kompilera alla Jade-filer i en viss katalog, använd:
jade dir_name
För att ställa in katalogen som du vill att dina HTML-filer ska skrivas för att placera --ut flagga mellan namnet på ingångs- och utgångskataloger:
jade src_dir - out html_dir
Att använda Jade Kolla på funktion för automatisk samling vid lagring, passera --Kolla på flagga direkt efter jade-kommandot.
För enskilda filer:
jade - klocka < index.jade > index.html
Eller för fullständiga kataloger:
jade - watch dir_name
jade - watch dir_name - out html_dir
Precis som vi vill ha CSS-filerna som vi distribuerar för att optimeras, vill vi också leverera våra JavaScript-filer på ett så effektivt sätt som möjligt.
Det är vanligt att vi har flera JS-filer som går in i våra projekt, till exempel behöver Modernizr, jQuery och vår egen anpassade kod, men vi vill också minimera antalet http-förfrågningar våra webbplatser gör. Dessutom vill vi se till att laddningstiden för vår JavaScript är super snabb.
Det bästa sättet att hantera båda problemen är att samtidigt sammankalla våra JavaScript-filer till en enda fil, vilket betyder att vi bara behöver en http-förfrågan för att ladda den och minska den resulterande filen så att den är så liten som möjligt.
Vi använder UglifyJS-paketet för att ta hand om den här processen.
För att installera uglify-js globalt kör:
[sudo] npm installera uglify-js -g
Om du vill kombinera två JavaScript-filer och sedan ta bort whitespace och kommentarer från den resulterande filen använder du uglifyjs kommando följt av namnen på var och en av dina källfiler med mellanslag däremellan. Därefter ingår --produktion flagga och namnet du vill ha din nya kombinerade och minifierade fil att ha:
uglifyjs input1.js input2.js --output input.min.js
Förutom standardavlägsnandet av blankutrymme och kommentarer, kan du också lägga till komprimering som faktiskt ändrar koden för att minska dess storlek. För att göra detta lägg till --komprimera flagga i slutet av kommandot:
uglifyjs input1.js input2.js --output input.min.js --compress
Ett annat optimeringsalternativ tillgängligt är att "mangla" koden, som gör saker som crunching variabel, funktion och argument namn ner till enstaka tecken. För att använda detta alternativ lägg till --mangel flagga i slutet av kommandot:
uglifyjs input1.js input2.js --output input.min.js --mangle
Du kan också använda både komprimering och mangling genom att passera båda flaggorna:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
Läs mer om de kommandon som du kan köra med UglifyJS på: https://www.npmjs.com/package/uglify-js
Om du kombinerar och / eller minifierar tredjepartsskript som jQuery, Modernizr och så vidare, se till att du använder de fullständiga utvidgade versionerna av dessa filer. Det är generellt en dålig idé att omminifiera filer som redan har blivit minifierade eftersom du kan bryta deras funktionalitet.
Du kan identifiera filer som redan har minskats eftersom de vanligtvis följer namngivningskonventionen "name.min.js", medan den utökade versionen av filen kommer att bli "name.js".
Nu kan du fylla i några otroligt användbara uppgifter med olika kommandon, men vad händer om du kan slutföra alla uppgifter som ditt projekt behöver alla samtidigt med ett enda kommando?
I nästa handledning lär du dig hur du gör exakt det med hjälp av uppgiftslöpare för att konfigurera alla uppgifter som ditt projekt behöver så att hela din kompilering, autoprefixing, kombinering och optimering kan utföras på en gång och på några sekunder.
Jag ser dig i nästa handledning!
Accentsconagua