Share
Vi brukar använda tredjepartspaket i webbdesignprojekt.
Vi laddar in CSS från tredje part från projekt som Bootstrap and Foundation, och skript som jQuery och Modernizr. Vi använder allt fler även tredjepartspaket som en del av utvecklingsprocesser, som kompilatorer för CSS-förprocessorer eller kodrengörings- och komprimeringsverktyg för att maximera den hastighet våra webbplatser laddar och kör på.
Att hantera alla dessa paket kan snabbt bli en röra för manuell nedladdning, filöverföring och uppdatering. Visst, vi har gjort det till jobbet, men det är tidskrävande och dess oförmåga lämnar ofta projekt med föråldrad kod. Nu finns det ett bättre sätt att använda kommandoradsdrivna pakethanterare.
I den här handledningen lär du dig hur du gör hantering av tredjepartspaket en fråga om att bara skriva en handfull två till fem ordkommandon.
Notera: Om du inte har följt den första handledningen i den här serien, ta hand om grunderna, hittar du det bra att gå igenom det innan du börjar här.
För att komma igång med att använda kommandoraden för att hantera tredjepartspaket, är det första du behöver "pakethanteringssystem" eller "pakethanterare". De två alternativen som är den mest populära bland webbdesigners just nu är npm och Bower, och det är de system du lär dig att använda idag.
Du kanske har hört talas om Node.js, en JavaScript-baserad väska med godis som kan driva allt från bloggplattformar, till kodning av IDE, till mediecentraler till hela operativsystem.
Tillsammans med en installation av Node.js kommer pakethanteraren npm, ett oerhört användbart system som du ser att utnyttjas ofta i hela serien.
I motsats till vad du kanske tror, gör npm det inte står för "Node Package Manager." Officiellt står det för "Npm är inte en akronym" och på toppen av sidan ser du små skämt kommer upp varje uppdatering som "aldrig poke apor" och "newts parading majestätiskt."
Från och med nu tillhandahåller npm tillgång till och hantering för 127.664 paket som är utformade för alla olika typer av ändamål. Bland de artiklar som är användbara för webbdesign hittar du paket som:
I denna handledning används vi med npm i kombination med Node.js, men det är en självständig enhet som kan användas med andra system som den nyanlända IO.js.
Som nybörjare rekommenderar jag att du följer med handledningarna med Node.js, men du kanske vill utforska andra alternativ senare.
Min introduktion till att använda kommandoraden för pakethantering från tredje part kom faktiskt via Bower. Någon tippade mig till det genom att bara säga
"Har du provat Bower? Det är jättebra!"
Jag hade ingen aning om vad den skulle användas till, så jag gick till www.bower.io och en titt på listan över tillgängliga paket var allt som krävdes för att glödlampan skulle börja gå ut.
Bower paketbiblioteket innehåller saker som:
Chansen är mycket hög. Du använder regelbundet minst en eller två av dessa paket i dina projekt. Bower gör det snabbare och enklare för dig att fortsätta göra det.
I vissa fall kan du hitta ett paket tillgängligt på både npm och Bower. Om så är fallet, vilken version ska du använda?
Båda dessa alternativ kommer att installera och uppdatera paket lika snabbt som varandra. Det finns inga hårda och snabba regler att använda, och i sista hand utvecklar du din egen sätt att göra saker, så jag ska bara ge dig en allmän tumregel du kan basera dina beslut på för nu.
Från ett webbdesignperspektiv beror skillnaden verkligen på hur du kommer att använda paketen, och de två typiska användningsfallen du kommer ha är för frontendisposition vs. utvecklingsanvändning.
Bower är utformad för pakethantering i fronten, så välj det om du letar efter något som kommer att förbrukas av besökare via en webbläsare.
Å andra sidan är npm-paketet valet att gå med om du bara ska använda ett paket som en del av din utvecklingsprocess och det kommer inte att ingå i den färdiga produkten.
Tack och lov är installationen npm ganska rakt framåt eftersom den är bunden med installationsprogrammet för Node.js. Gå över till http://www.nodejs.org och ladda ner installationsprogrammet för din plattform. Installera det på din maskin och npm kommer att installeras tillsammans med det, så är det bra att fortsätta.
Viktig! Även om du redan har Node.js installerat på ditt system, följ steget ovan för att se till att du har den senaste versionen. Om du kör en gammal version, kanske några av de steg du måste följa när du går igenom den här serien kanske inte fungerar.
Enligt npm-webbplatsen är sannolikheten att det finns en senare version av npm tillgänglig än den du får med din Node.js-installation.
För att vara säker på att du är på den senaste versionen kör:
[sudo] npm installera npm -g
Git, tillsammans med Node.js och npm, är en förutsättning för att använda Bower. Git är också en förutsättning för några av de andra webbdesign-orienterade paket som du finner att du vill använda, så låt oss få allt allt kvadrerat på ditt system innan du går vidare.
För OSX-användare vill du gå till huvudwebbplatsen Git, ta det binära installationsprogrammet och köra det som du skulle något annat appinstallatör: http://git-scm.com/download/mac
För att kunna använda Bower på Windows behöver du istället en specifik version av Git för Windows som heter msysGit. Slå Ladda ner knappen och ta tag i den körbara installationsprogrammet, men kör det inte ännu: http://msysgit.github.io
Anledningen till att jag sa att jag inte skulle installera den är att du måste vara försiktig med att välja rätt inställning när du kör installationsprogrammet. När du ser skärmen nedan, var noga med att kontrollera Kör Git från Windows Command Prompt.
För mer information om hur du installerar msysGit som en förutsättning för Bower, se: En anteckning för Windows-användare.
Bower kan installeras via npm genom att köra detta kommando:
[sudo] npm installera -g bower
Mac-användare, eftersom vi använder -g flagga för att installera Bower globalt kommer ihåg att du kommer att behöva inkludera sudo i början av kommandot, ange sedan ditt lösenord när du blir ombedd.
Både npm och Bower arbetar med specialiserade manifestfiler som innehåller information om ett projekt och en lista över paket som den använder. Med npm-projekt namnges filen "package.json" och i Bower-projekt heter den "bower.json". Det enklaste sättet att skapa dessa filer är att använda i det kommando i samband med varje. Låt oss göra det nu.
Med din terminal pekade på ditt projekts rotmall, kör det här kommandot:
npm init
Detta kommer att ställa dig en rad frågor du kan svara inom terminalen, vilket ger informationen din "package.json" -fil kommer att skapas från.
Läs mer om npm init kommando på: https://docs.npmjs.com/cli/init
Återigen, med din terminal pekad på projektets rotmapp, kör det här kommandot:
bower init
Precis som med npm-initieringsprocessen svarar du på en rad frågor, och dina svar kommer att bilda din "bower.json" -fil.
Läs mer om bower init kommando på: http://bower.io/docs/creating-packages/#bowerjson
Med projektet initierat är du redo att börja sätta in paket. För att göra detta måste du hitta de paket du vill använda via antingen npm eller Bower.
Du måste söka på rätt plats eftersom du behöver veta paketets korrekta namn inom npm- eller Bower-ekosystemen för att kunna installera och uppdatera det.
Du kan söka efter paket som du vill använda med npm via sökfältet högst upp på sin hemsida.
Det är också möjligt att söka direkt via kommandoraden med npm-sökning , men jag tycker personligen det lättare att hitta det jag söker direkt på npm-sidan.
När du hittar paketet du vill använda, notera paketets namn.
Söka efter Bower-paket kan göras via http://bower.io/search/.
Som med npm, notera det paketnamn du vill använda när du har hittat det.
När du har hittat ett paket du vill använda är du redo att installera det. Här använder du det paketnamn du noterade. I nedanstående anvisningar, använd det namnet vart du ser
För att installera ett paket lokalt, dvs bara i din projektmapp, kör:
npm installera
Paketet laddas ned i en undermapp med namnet "node_modules", vilket gör det tillgängligt för användning inom ditt projekt. Till exempel:
Förutom att installera paket lokalt finns det också möjlighet att installera npm-paket globalt.
Lokalt installerade paket är endast tillgängliga för användning inom ramen för ditt projekt, men globalt installerade paket kan användas var som helst på din maskin. Till exempel, när "mindre" paketet är installerat globalt kan du använda det för att kompilera något ".löst" dokument, var som helst i ditt system.
För att globalt installera ett paket bifogar du -g flagga till ditt kommando:
[sudo] npm installera-g
Installationsprocessen för Bower-paket är nästan exakt samma som med npm, med kommandot:
bower installation
Skillnaden är att Bower-paket placeras i en undermapp med namnet "bower_components", till exempel:
Eftersom du använder Bower för att distribuera frontendepaket inom specifika projekt kan alla dina installationer ske lokalt, så du behöver inte använda -g flagga.
Om du är intresserad av att dela eller till och med bara kopiera och flytta runt ett projekt som du har använt npm eller Bower in, är beroendehantering en bra sak att veta om. Låt mig förklara varför.
Du kommer återkalla de manifestfiler du skapade tidigare; "Package.json" och "bower.json". I alla dessa filer kan du lägga till en lista över paket som ditt projekt beror på.
Du har redan sett hur npm-paket går in i en mapp med namnet "npm_modules" och Bower's till "bower_components". Tja, det snygga är att om du vill dela med dig av ditt projekt kan du helt släppa bort båda dessa mappar, så länge du har dina beroenden listade i dina manifestfiler.
Det här kan enkelt spara dig ett par hundra megabyte eller så, vilket gör det mycket lättare att flytta ditt projekt runt.
När någon annan får tag på ditt projekt kan de springa npm installera och alla paket som anges i filen "package.json" kommer automatiskt hämtas till en ny mapp "npm_modules".
Likaså kommandot bower installation kommer automatiskt ladda ner eventuella beroenden som anges i filen "bower.json" och placera dem i en ny mapp "bower_components".
Det finns två typer av beroenden:
Produktionsberoende - i samband med webbdesign hänvisar detta till paket som kommer att distribueras i frontänden, t.ex. Modernizr för cross-browser kompatibilitet.
Utvecklingsberoende - i samband med webbdesign hänvisar detta till paket som används under utveckling, t.ex. MINDER för .lös filsamling.
Bower och npm låter dig ange produktions- och utvecklingsberoende. Men som vi diskuterade tidigare använder du Bower för frontendepaket och npm för utvecklingspaket. Som sådan ställer vi in dina Bower-paket för att vara produktionsberoende, och dina npm-moduler är utvecklingsberoende.
Metoden för inställning av beroenden är densamma i både npm och Bower, och det är att lägga till en flagga i kommandot du använder för att installera ett paket.
För att ange ett paket som utvecklingsberoende lägg till --spara-dev flagga, t.ex..
npm installera--spara-dev
Paketet kommer installeras på samma sätt som du redan har sett, men det läggs till i listan över devDependencies i din "package.json" -fil som så:
För att ställa in ett paket som ett produktionsberoende lägg till --spara flagga, t.ex..
bower installation--spara
I detta fall kommer paketet att läggas till i listan över beroenden i "bower." filen som så:
Notera: När du installerar npm-paket globalt med -g flagga, du behöver inte oroa dig för att använda heller --spara inte heller --spara-dev flaggor.
Uppdatering av paket är också ett kommandot för både Bower och npm.
För lokalt installerade paket, kör följande kommando i rotmappen i ditt projekt där din "node_modules" -mapp är:
npm uppdatering
För att istället uppdatera globalt installerade paket lägg till -g flagga:
[sudo] npm uppdatering-g
Du kan också lämna paketets namn så att du kan batch uppdatera alla dina paket samtidigt.
För att uppdatera alla paket i ett visst projekt, peka din terminal i sin rotmapp och kör:
npm uppdatering
Och för att uppdatera alla dina globalt installerade paket kör:
[sudo] npm uppdatering -g
Uppdatering av Bower-paket är i huvudsak samma som med npm. Från root-mappen till ditt projekt kör den här som innehåller din "bower_components" -mapp:
bower uppdatering
Den senaste versionen hämtas automatiskt och läggs till i mappen "bower_components".
När du har installerat dina paket, vill du noga veta hur du faktiskt kan använda dem, rätt?
Med Bower-paket kan processen vara densamma som du skulle använda för att dra in tillgångar normalt, dvs via manus eller länk element i din HTML, ladda filer direkt från mappen "bower_components".
Men det här är inte optimalt och det finns bättre sätt att gå om det. Till exempel kan du slå samman alla JS-filer du använder från dina Bower-paket till en komprimerad fil och ladda den istället.
Du får se en demonstration av hur du ska gå till det här i den kommande handledningen Automation with Task Runners.
Paket installerade via npm kommer vanligen att användas via kommandorads- eller uppgiftslöpningsskript.
Olika paket har sin egen uppsättning inbyggda kommandon som du kan använda för alla slags olika uppgifter som kompilering, komprimering, kombinering och mer. Dessa paketspecifika uppgifter kan i sin tur automatiseras genom att konfigurera uppgiftslöpare för att utföra flera uppgifter samtidigt.
Du lär dig hur du använder npm-paket på båda dessa sätt under de efterföljande handledningarna i den här serien.
När vi kommer fram nästa går vi igenom hur du kan utnyttja kommandoraden för att lägga till ett helt nytt effektivitetslag till din främre kod, både i hur du utvecklar den och hur den körs en gång klar.
Du lär dig hur du använder kommandoraden för preprocessor-kompilering, CSS autoprefixing, JS och CSS-filoptimering och kompilering för HTML-shorthand och templerande.
Jag kommer se dig i nästa handledning, Driva upp förra ändkod.
Accentsconagua