Share
Vi bruker vanligvis tredjepartspakker i webdesignprosjekter.
Vi laster inn tredjeparts CSS fra prosjekter som Bootstrap og Foundation, og skript som jQuery og Modernizr. I økende grad bruker vi også tredjepartspakker som en del av utviklingsprosesser, som kompilatorer for CSS preprosessorer eller kodesrensings- og komprimeringsverktøy for å maksimere hastigheten våre nettsteder laster og kjører på.
Å håndtere alle disse pakkene kan raskt bli et rot av manuell nedlasting, filoverføring og oppdatering. Visst, vi har gjort det til å fungere, men det er tidkrevende og dets uhåndterlighet etterlater ofte prosjekter som bruker utdatert kode. Nå er det en bedre måte å bruke kommandolinjepåvirket pakkeforvaltere.
I denne opplæringen lærer du hvordan du gjør håndtering av tredjepartspakker et spørsmål om å bare skrive en håndfull to til fem ordkommandoer.
Merk: Hvis du ikke har fulgt den første opplæringen i denne serien, Grasping Basics, vil du finne det nyttig å gå gjennom det før du starter her.
For å komme i gang med å bruke kommandolinjen til å håndtere tredjepartspakker, er det første "pakkehåndteringssystem" eller "pakkebehandling" den første du trenger. De to valgene som er de mest populære blant webdesignere akkurat nå er npm og Bower, og det er de systemene du skal lære å bruke i dag.
Du har kanskje hørt om Node.js, en JavaScript-basert pose med godbiter som kan drive alt fra bloggplattformer, til koding av IDE, til mediesentre til hele operativsystemet.
Sammen med en installasjon av Node.js kommer pakkeadministratoren npm, et enormt nyttig system som du vil se brukt ofte i denne serien.
I motsetning til hva du kanskje tror, gjør npm det ikke stå for "Node Package Manager." Offisielt står det for "Npm er ikke et akronym" og på toppen av siden ser du små vitser komme opp hver forfriskning som "never poke monkeys" og "newts parading majestetisk."
Fra nå av gir npm tilgang til og administrasjon for 127.664 pakker som er designet for alle ulike typer formål. Blant de elementene som er nyttige for webdesign finner du pakker som:
I forbindelse med denne opplæringen bruker vi npm i forbindelse med Node.js, men det er en uavhengig enhet som kan brukes sammen med andre systemer som den nylig ankomne IO.js.
Som nybegynner anbefaler jeg at du følger med veiledningene ved hjelp av Node.js, men du kan gjerne utforske andre alternativer senere.
Min introduksjon til bruk av kommandolinje for tredjeparts pakkehåndtering kom faktisk via Bower. Noen tippet meg til det ved å bare si
"Har du prøvd Bower? Det er kjempebra!"
Jeg ante ikke hva det skulle bli brukt til, så jeg dro til www.bower.io og en titt på listen over tilgjengelige pakker var alt som trengte for lyspæren å begynne å gå av.
Bower-pakkebiblioteket inneholder ting som:
Sjansene er svært høye. Du bruker regelmessig minst en eller to av pakkene i prosjektene dine. Bower gjør det raskere og enklere for deg å fortsette å gjøre det.
I noen tilfeller kan du finne en pakke er tilgjengelig på både npm og Bower. Hvis ja, hvilken versjon skal du bruke?
Begge disse alternativene vil installere og oppdatere pakker like raskt som hverandre. Det er ingen harde og raske regler å bruke, og til slutt utvikler du din egen måte å gjøre ting på, så jeg gir deg bare en generell tommelfingerregel du kan basere dine beslutninger på for nå.
Fra et webdesignperspektiv kommer forskjellen virkelig til hvordan du skal bruke pakkene, og de to typiske brukstilfellene du har, er for frontendisponering vs. utviklingsbruk.
Bower er utviklet for pakkehåndtering på forsiden, så velg det hvis du leter etter noe som skal forbrukes av besøkende via en nettleser.
På den annen side vil npm-pakker være valget å gå med hvis du bare skal bruke en pakke som en del av utviklingsprosessen, og det vil ikke bli inkludert i ferdigproduktet.
Heldigvis er installering av npm ganske rett frem som det er samlet sammen med installasjonsprogrammet for Node.js. Gå over til http://www.nodejs.org og last ned installasjonsprogrammet for plattformen. Installer den på maskinen din og npm blir installert sammen med den, så vil du være god til å fortsette.
Viktig! Selv om du allerede har Node.js installert på systemet, følger du trinnene ovenfor for å sikre at du har den nyeste versjonen. Hvis du kjører en utdatert versjon, kan noen av trinnene du må følge når du går gjennom denne serien, ikke fungere.
Ifølge npm-siden er sannsynligheten at det kan være en senere versjon av npm tilgjengelig enn den du får sammen med Node.js-installasjonen.
For å være sikker på at du kjører på den nyeste versjonen:
[sudo] npm installere npm -g
Git, sammen med Node.js og npm, er en forutsetning for bruk av Bower. Git er også en forutsetning for noen av de andre webdesign-orienterte pakkene du vil finne deg selv som vil bruke, så la oss få det hele kvadret bort på systemet ditt før du går videre.
For OSX-brukere vil du gå til hovedgit-nettstedet, ta tak i det binære installasjonsprogrammet og kjøre det som du ville andre appinstallatører: http://git-scm.com/download/mac
For å kunne bruke Bower på Windows trenger du i stedet en bestemt versjon av Git for Windows kalt msysGit. Slå den nedlasting knappen og ta tak i det kjørbare installasjonsprogrammet, men ikke kjør det enda: http://msysgit.github.io
Grunnen til at jeg sa ikke å installere den ennå, er at du må være forsiktig med å velge riktig innstilling når du kjører installatøren. Når du ser på skjermen nedenfor, må du sjekke Kjør Git fra Windows Command Prompt.
For mer informasjon om installering av msysGit som forutsetning for Bower, se: En notat for Windows-brukere.
Bower kan installeres via npm ved å kjøre denne kommandoen:
[sudo] npm installere -g bower
Mac-brukere, fordi vi bruker -g flagg for å installere Bower globalt husk at du sannsynligvis må inkludere sudo ved starten av kommandoen, skriv inn passordet ditt når du blir bedt om det.
Både npm og Bower jobber med spesialiserte manifestfiler som inneholder informasjon om et prosjekt og en liste over pakker den bruker. Med npm prosjekter er filen navngitt "package.json" og i Bower prosjekter heter den "bower.json". Den enkleste måten å lage disse filene på er å bruke i det kommando knyttet til hver. La oss gjøre det nå.
Med din terminal peket på prosjektets rotmappe, kjør denne kommandoen:
npm init
Dette vil stille deg en rekke spørsmål du kan svare innen terminalen, og gi informasjonen din "package.json" -fil vil bli opprettet fra.
Les mer om npm init kommandoen på: https://docs.npmjs.com/cli/init
Igjen, med din terminal peket på prosjektets rotmappe, kjør denne kommandoen:
bower init
Akkurat som med npm-initialiseringsprosessen, svarer du på en rekke spørsmål, og svarene dine vil danne din "bower.json" -fil.
Les mer om bower init kommandoen på: http://bower.io/docs/creating-packages/#bowerjson
Med prosjektet initialisert er du klar til å begynne å pakke inn. For å gjøre dette må du finne pakkene du vil bruke gjennom enten npm eller Bower.
Du må søke på riktig sted som du trenger å vite pakkenes korrekte navn i npm eller Bower-økosystemene for å kunne installere og oppdatere det.
Du kan søke etter pakker du vil bruke med npm via søkefeltet øverst på hjemmesiden sin.
Det er også mulig å søke direkte via kommandolinjen med npm søk , men jeg personlig finner det lettere å finne det jeg leter etter direkte på npm-siden.
Når du finner pakken du vil bruke, legg merke til pakkenavnet.
Søke etter Bower-pakker kan gjøres via http://bower.io/search/.
Som med npm, legg merke til pakkenavnet du vil bruke når du finner det.
Når du har funnet en pakke du vil bruke, er du klar til å installere den. Det er her du vil bruke pakkenavnet du har notert på. I det nedenstående instruksjonene, bruk dette navnet uansett hvor du ser
For å installere en pakke lokalt, dvs. bare innenfor prosjektmappen, kjør du:
npm installasjon
Pakken vil bli lastet ned i en undermappe kalt "node_modules", slik at den blir tilgjengelig for bruk i prosjektet. For eksempel:
I tillegg til å installere pakker lokalt, er det også mulighet til å installere npm-pakker globalt.
Lokalt installerte pakker er bare tilgjengelige for bruk i prosjektets sammenheng, men globalt installerte pakker kan brukes hvor som helst på maskinen din. For eksempel, når "mindre" pakken er installert globalt, kan du bruke den til å kompilere noe ".fritt" dokument, hvor som helst i systemet ditt.
For å globalt installere en pakke, legg ved -g flagg til kommandoen din:
[sudo] npm installere-g
Installasjonsprosessen for Bower-pakker er nesten nøyaktig den samme som med npm, ved hjelp av kommandoen:
bower installasjon
Forskjellen er at Bower-pakkene er plassert i en undermappe som heter "bower_components", for eksempel:
Fordi du bruker Bower til å distribuere frontendpakker innenfor bestemte prosjekter, kan alle installasjonene dine gjøres lokalt, slik at du ikke trenger å bruke -g flagg.
Hvis du er interessert i å dele eller til og med bare duplisere og flytte rundt et prosjekt du har brukt npm eller Bower i, er avhengighetsadministrasjon en flott ting å vite om. La meg forklare hvorfor.
Du vil huske manifestfilene du opprettet tidligere; "Package.json" og "bower.json". I hver av disse filene kan du legge til en liste over pakker prosjektet ditt avhenger av.
Du har allerede sett hvordan npm-pakker går inn i en mappe med navnet "npm_modules" og Bower's til "bower_components". Vel, den kule tingen er hvis du vil dele prosjektet ditt, kan du helt utelate begge disse mappene, så lenge du har dine avhengigheter oppført i manifestfiler.
Dette kan lett spare deg et par hundre megabyte eller så, noe som gjør det mye enklere å flytte prosjektet ditt rundt.
Når noen andre får tak i prosjektet, kan de kjøre npm installasjon og alle pakkene som er oppført i filen "package.json", lastes automatisk ned i en ny "npm_modules" -mappe.
Likeledes kommandoen bower installasjon vil automatisk laste ned eventuelle avhengigheter som er oppført i "bower.json" -filen og plassere dem i en ny mappe "bower_components".
Det er to typer avhengigheter:
Produksjonsavhengigheter - i sammenheng med webdesign refererer dette til pakker som vil bli distribuert på forenden, f.eks. Modernizr for kryssbrowser kompatibilitet.
Utviklingsavhengigheter - i sammenheng med webdesign refererer dette til pakker som brukes under utvikling, f.eks. MINDRE for .less filsamling.
Bower og npm lar deg både spesifisere produksjons- og utviklingsavhengigheter. Men som vi diskuterte tidligere bruker du Bower for front end-pakker og npm for utviklingspakker. Som sådan vil vi sette Bower-pakkene dine for å være avhengige av produksjon, og dine npm-moduler skal være utviklingsavhengigheter.
Metoden for å angi avhengighet er den samme i både npm og Bower, og det er å legge til et flagg i kommandoen du bruker til å installere en pakke.
For å sette en pakke som en utviklingsavhengighet, legg til --save-dev flagg, f.eks.
npm installasjon--save-dev
Pakken blir installert på samme måte som du allerede har sett, men den blir lagt til i listen over devDependencies i filen "package.json" slik:
For å angi en pakke som en produksjonsavhengighet, legg til --lagre flagg, f.eks.
bower installasjon--lagre
I dette tilfellet legges pakken til listen over avhengig i "bower." filen slik:
Merk: Når du installerer npm pakker globalt med -g flagg, du trenger ikke å bekymre deg for å bruke heller --lagre eller --save-dev flagg.
Oppdatering av pakker er også en linjekommando for både Bower og npm.
For lokalt installerte pakker, kjør følgende kommando i rotmappen til prosjektet ditt der mappen "node_modules" er:
npm oppdatering
Hvis du vil oppdatere globalt installerte pakker, legger du til -g flagg:
[sudo] npm oppdatering-g
Du kan også legge ut pakkenavnet slik at du kan batchoppdatere alle pakkene dine samtidig.
For å oppdatere alle pakkene i et bestemt prosjekt, pek terminalen din i rotmappen og kjør:
npm oppdatering
Og for å oppdatere alle dine globalt installerte pakker som kjøres:
[sudo] npm oppdatering -g
Oppdatering av Bower-pakker er i hovedsak det samme som med npm. Fra rotmappen til prosjektet ditt, den som husker mappen "bower_components", kjører denne kommandoen:
bower oppdatering
Den nyeste versjonen blir automatisk lastet ned og lagt til i mappen "bower_components".
Når du har installert pakkene dine, vil du sannsynligvis vite hvordan du faktisk kan bruke dem, riktig?
Med Bower-pakker kan prosessen være den samme som du ville bruke til å trekke inn eiendeler normalt, dvs. via manus eller link elementer i HTML-en din, laster filer rett ut av mappen "bower_components".
Men dette er ikke optimalt, og det er bedre måter å gå om det. For eksempel kan du fusjonere alle JS-filene du bruker fra Bower-pakkene, til en komprimert fil og last det i stedet.
Du vil se en demonstrasjon av hvordan du skal gjøre dette i den kommende opplæringen Automation with Task Runners.
Pakker installert via npm vil vanligvis bli brukt via kommandolinje eller oppgave runner skript.
Ulike pakker kommer med sitt eget sett med innebygde kommandoer du kan bruke til alle slags forskjellige oppgaver som kompilering, komprimering, kombinering og mer. Disse pakkespesifikke oppgavene kan i sin tur automatiseres ved å sette opp oppgaveløpere til å utføre flere oppgaver samtidig.
Du lærer hvordan du bruker npm-pakker på begge disse måtene i løpet av de etterfølgende opplæringene i denne serien.
Når vi kommer opp neste, går vi gjennom hvordan du kan utnytte kommandolinjen for å legge til et helt nytt effektivitetsnivå til frontendekoden din, både i hvordan du utvikler den og hvordan den går en gang fullført.
Du lærer hvordan du bruker kommandolinje for preprosessor-kompilering, CSS autoprefixing, JS og CSS filoptimalisering, og kompilering for HTML-shorthand og templering.
Jeg ser deg i neste opplæring, Slå opp foran sluttkode.
Accentsconagua