Share
Utilizăm în mod obișnuit pachete terță parte în proiectele de web design.
Încărcăm în CSS terțe părți din proiecte precum Bootstrap și Foundation și scripturi precum jQuery și Modernizr. În plus, folosim, de asemenea, pachete de terțe părți ca parte a proceselor de dezvoltare, cum ar fi compilatoare pentru preprocesoare CSS sau instrumente de curățare și compresie a codurilor pentru a maximiza viteza pe care site-urile noastre o încarcă și o rulează la.
Gestionarea cu toate aceste pachete poate deveni rapid o mizerie de descărcare manuală, transfer de fișiere și actualizare. Sigur, am reușit să lucrăm, dar este nevoie de timp și lipsa de disponibilitate îi lasă de multe ori proiecte care folosesc codul depășit. Acum există o cale mai bună, folosind managerii de pachete de comandă alimentați.
În acest tutorial veți învăța cum să faceți manipularea pachetelor terțelor părți o chestiune de tastare a unei mii de comenzi de două până la cinci cuvinte.
Notă: Dacă nu ați urmat primul tutorial din această serie, Apucând elementele de bază, veți găsi că este util să faceți acest lucru înainte de a începe aici.
Pentru a începe utilizarea liniei de comandă pentru a gestiona pachetele terță parte, primul lucru de care aveți nevoie este un "sistem de gestionare a pachetelor" sau "manager de pachete". Cele două opțiuni care sunt departe și cele mai populare printre designerii de web chiar acum sunt npm și Bower, iar acestea sunt sistemele pe care le veți învăța să le utilizați astăzi.
S-ar putea să fi auzit de Node.js, un sac de bun venit bazat pe JavaScript, care poate suporta totul de la platforme blog, la codarea IDE-urilor, la centrele media la întregul sistem de operare.
Împreună cu o instalare de Node.js vine managerul de pachete npm, un sistem extraordinar de util pe care îl veți vedea adesea folosit în întreaga serie.
Contrar a ceea ce ați putea crede mai întâi, npm nu nu stand pentru "Node Package Manager" "Npm nu este un acronim" și în partea de sus a site-ului veți vedea mici glume vin fiecare reîmprospătare ca "maimuțe niciodată poke" și "Newts parading maiestuos."
Din acest moment, npm oferă acces la și gestionarea a 127.664 pachete care sunt proiectate pentru toate tipurile diferite de scopuri. Printre elementele utile pentru web design veți găsi pachete precum:
În scopul acestui tutorial vom folosi npm împreună cu Node.js, totuși este o entitate independentă care poate fi utilizată cu alte sisteme cum ar fi noul IO.js.
Ca începător vă recomandăm să urmați împreună cu tutorialele folosind Node.js, dar vă recomandăm să explorați alte opțiuni mai târziu.
Introducerea mea în utilizarea liniei de comandă pentru gestionarea pachetelor terțe a venit de fapt prin Bower. Cineva ma făcut să spun asta
"Ați încercat Bower? Este minunat!"
Nu aveam nici o idee despre ce va fi folosit, așa că m-am dus la www.bower.io și o privire la lista de pachete disponibile a fost tot ce a fost necesar pentru bec să înceapă.
Biblioteca pachetului de biți include lucruri precum:
Există șanse foarte mari să utilizați cel puțin unul sau două dintre aceste pachete în proiectele dvs. în mod regulat. Bower vă face mai repede și mai ușor să continuați.
În unele cazuri s-ar putea găsi un pachet disponibil atât pe npm, cât și pe Bower. Dacă da, care versiune ar trebui să utilizați?
Ambele opțiuni vor instala și actualiza pachetele la fel de repede ca și celelalte. Nu există reguli dure și rapide pe care să le folosiți și, în cele din urmă, veți dezvolta propriul dvs. mod de a face lucrurile, așa că vă voi oferi o regulă generală pe care vă puteți baza acum deciziile.
Dintr-o perspectivă de design web, diferența într-adevăr se reduce la modul în care veți folosi pachetele, iar cele două cazuri tipice de utilizare pe care le veți avea sunt pentru implementarea frontală vs. utilizarea de dezvoltare.
Bower este conceput pentru gestionarea pachetelor de pe front, deci alegeți-le dacă căutați ceva ce va fi consumat de vizitatorii site-ului printr-un browser.
Pe de altă parte, pachetele npm vor fi alegerea potrivită dacă veți folosi doar un pachet ca parte a procesului de dezvoltare și nu va fi inclus în produsul finit.
Din fericire, instalarea npm este destul de dreaptă, deoarece este cuplată cu programul de instalare pentru Node.js. Mergeți la http://www.nodejs.org și descărcați programul de instalare pentru platforma dvs. Instalați-l pe mașină și npm va fi instalat împreună cu acesta, atunci veți fi bine să continuați.
Important! Chiar dacă aveți deja instalat Node.js în sistemul dvs., urmați pașii de mai sus pentru a vă asigura că aveți cea mai recentă versiune. Dacă executați o versiune depășită, este posibil ca unii pași pe care trebuie să îi urmați în timp ce treceți prin această serie să nu funcționeze.
În funcție de site-ul npm, probabilitatea este că poate exista o versiune ulterioară a npm disponibilă decât cea pe care o primiți împreună cu instalarea Node.js.
Pentru a vă asigura că aveți cea mai recentă versiune executați:
[sudo] npm instala npm -g
Git, împreună cu Node.js și npm, este o condiție prealabilă pentru utilizarea Bower. Git este, de asemenea, o condiție prealabilă pentru unele dintre celelalte pachete orientate pe designul web pe care le veți găsi pe care doriți să le utilizați, așa că haideți să le scoateți dincolo de sistemul dvs. înainte de a vă deplasa.
Pentru utilizatorii OSX, veți dori să accesați site-ul principal Git, să luați programul de instalare binar și să-l rulați ca pe orice alt program de instalare: http://git-scm.com/download/mac
Pentru a utiliza Bower pe Windows, veți avea nevoie de o versiune specifică a lui Git pentru ferestre numite msysGit. Loveste Descarca butonul și apucați instalatorul executabil, dar nu îl rulați încă: http://msysgit.github.io
Motivul pentru care am spus să nu instalez încă este că va trebui să fiți atent să alegeți setarea potrivită atunci când rulați instalatorul. Când vedeți ecranul de mai jos, asigurați-vă că ați verificat Rulați Git din Promptul de comandă Windows.
Pentru mai multe informații despre instalarea lui msysGit ca o condiție prealabilă pentru Bower, consultați: O notă pentru utilizatorii de Windows.
Bower poate fi instalat prin npm executând această comandă:
[sudo] npm instalați -g bower
Utilizatorii de Mac, pentru că folosim -g steagul pentru a instala Bower la nivel global amintiți-vă va trebui probabil să includă sudo la începutul comenzii, introduceți parola când vi se solicită.
Atât npm cât și Bower lucrează cu fișiere manifest specializate care conțin informații despre un proiect și o listă de pachete pe care le utilizează. Cu proiectele npm fișierul este denumit "package.json" și în proiectele Bower este numit "bower.json". Cea mai ușoară modalitate de a crea aceste fișiere este să utilizați init comandă asociată cu fiecare. Să facem asta acum.
Cu terminalul indicat în dosarul rădăcină al proiectului, executați această comandă:
npm init
Aceasta vă va întreba o serie de întrebări pe care le puteți răspunde în cadrul terminalului, furnizând informațiile pe care le va crea fișierul "package.json" de la.
Citiți mai multe despre npm init comanda la: https://docs.npmjs.com/cli/init
Din nou, cu terminalul indicat la dosarul rădăcină al proiectului, executați această comandă:
bower init
La fel ca în cazul procesului de inițializare npm, veți răspunde la o serie de întrebări, iar răspunsurile dvs. vor forma fișierul dvs. "bower.json".
Citiți mai multe despre bower init comanda la: http://bower.io/docs/creating-packages/#bowerjson
Cu proiectul inițializat, sunteți gata să începeți să aduceți pachete. Pentru a face acest lucru va trebui să găsiți pachetele pe care doriți să le utilizați fie prin npm, fie prin Bower.
Trebuie să căutați în locația potrivită pentru a ști numele corect al pachetului în cadrul ecosistemelor npm sau Bower pentru a putea instala și actualiza.
Puteți căuta pachetele pe care doriți să le utilizați cu npm prin bara de căutare din partea de sus a paginii de pornire.
De asemenea, este posibil să căutați direct prin intermediul liniei de comandă cu Căutare npm , cu toate acestea, eu personal mi se pare mai ușor să găsească ceea ce căutam direct la site-ul npm.
Când găsiți pachetul pe care doriți să îl utilizați, notați numele pachetului.
Căutarea pachetelor Bower se poate face prin http://bower.io/search/.
Ca și în cazul npm, notați numele pachetului pe care doriți să-l utilizați odată ce îl găsiți.
Odată ce ați găsit un pachet pe care doriți să îl utilizați, sunteți gata să îl instalați. Aici veți folosi numele pachetului pe care l-ați notat. În instrucțiunile de mai jos, utilizați acest nume oriunde vedeți
Pentru a instala un pachet local, adică doar în dosarul proiectului, executați:
npm install
Pachetul va fi descărcat într-un subfolder numit "node_modules", făcându-l disponibil pentru utilizare în cadrul proiectului dumneavoastră. De exemplu:
Pe lângă instalarea pachetelor locale, există și opțiunea de a instala pachete npm la nivel global.
Pachetele instalate local sunt disponibile numai pentru utilizarea în contextul proiectului dvs., dar pachetele instalate la nivel global pot fi utilizate de oriunde de pe aparat. De exemplu, odată ce pachetul "mai puțin" este instalat la nivel global, îl puteți folosi pentru a compila orice document ".less", oriunde în sistem.
Pentru a instala un pachet global atașați -g pavilion la comanda ta:
[sudo] npm install-g
Procesul de instalare pentru pachetele Bower este aproape exact la fel ca la npm, folosind comanda:
bower install
Diferența este că pachetele Bower sunt plasate într-un subfolder numit "bower_components", de exemplu:
Deoarece veți folosi Bower pentru a implementa pachete de tip front-end în cadrul anumitor proiecte, toate instalările se pot realiza la nivel local, deci nu va trebui să utilizați -g steag.
Dacă sunteți interesat (ă) de distribuirea sau chiar duplicarea și mutarea în jurul unui proiect pe care l-ați folosit în NMP sau Bower, gestionarea dependenței este un lucru minunat de știut. Lasă-mă să explic de ce.
Veți aminti fișierele manifestate pe care le-ați creat mai devreme; "Package.json" și "bower.json". În fiecare dintre aceste fișiere puteți adăuga o listă de pachete pe care depinde proiectul dvs..
Ați văzut deja cum pachetele npm intră într-un director numit "npm_modules" și Bower în "bower_components". Ei bine, lucrurile interesante sunt dacă doriți să împărtășiți proiectul dvs. puteți să omiteți complet ambele foldere, atât timp cât aveți dependențele listate în fișierele manifest.
Acest lucru vă poate salva cu ușurință câteva sute de megabiți, ceea ce face mult mai ușor să mutați proiectul în jur.
Atunci când altcineva se ocupă de proiectul dvs., ei pot rula npm install și toate pachetele listate în fișierul "package.json" vor fi descărcate automat într-un nou director "npm_modules".
De asemenea, comanda bower install va descărca automat toate dependențele listate în fișierul "bower.json" și le va plasa într-un nou folder "bower_components".
Există două tipuri de dependențe:
Dependențe de producție - în contextul designului web se referă la pachetele care vor fi desfășurate pe front, de ex. Modernizr pentru compatibilitatea cu browserul încrucișat.
Dezvoltarea dependențelor - în contextul designului web, aceasta se referă la pachetele utilizate în timpul dezvoltării, de ex. Mai puțin pentru compilarea fișierelor.
Bower și npm vă permit să specificați dependențele de producție și de dezvoltare. Cu toate acestea, după cum am discutat mai devreme, veți folosi Bower pentru pachetele din față și pentru pachetele de dezvoltare. Ca atare, vom seta pachetele dvs. Bower să fie dependențe de producție, iar modulele dvs. npm vor fi dependențe de dezvoltare.
Metoda de setare a dependențelor este aceeași în ambele npm și Bower, și anume adăugarea unui semn al comenzii pe care o utilizați pentru a instala un pachet.
Pentru a seta un pachet ca dependență de dezvoltare, adăugați --salvați-dev steagul, de exemplu.
npm install--salvați-dev
Pachetul va fi instalat în același mod pe care l-ați văzut deja, dar acesta va fi adăugat în lista de devDependencies în fișierul "package.json" așa cum este cazul:
Pentru a seta un pachet ca dependență de producție, adăugați --Salvați steagul, de exemplu.
bower install--Salvați
În acest caz, pachetul va fi adăugat în lista de dependențe în fișierul "Bower." Fișierul este astfel:
Notă: când instalați pachete npm la nivel global cu -g nu trebuie să vă faceți griji cu privire la utilizarea fiecăruia --Salvați nici --salvați-dev steaguri.
Actualizarea pachetelor este, de asemenea, o comandă de o singură linie pentru Bower și npm.
Pentru pachetele instalate local, executați următoarea comandă în directorul rădăcină al proiectului în care folderul "node_modules" este:
Actualizare npm
În loc să actualizați pachetele instalate la nivel global, adăugați -g steag:
[sudo] npm update-g
De asemenea, puteți lăsa numele pachetului astfel încât să puteți actualiza toate pachetele simultan.
Pentru a actualiza toate pachetele într-un anumit proiect, indicați terminalul la dosarul rădăcină și rulați:
Actualizare npm
Și pentru a actualiza toate pachetele instalate global:
[sudo] npm update -g
Actualizarea pachetelor Bower este, în esență, aceeași ca și cu npm. Din dosarul rădăcină al proiectului, cel care găzduiește dosarul "bower_components", executați această comandă:
bower update
Ultima versiune va fi descărcată automat și adăugată în folderul "bower_components".
Odată ce ați instalat pachetele, probabil că doriți să știți cum puteți să le utilizați, corect?
Cu pachetele Bower procesul poate fi același cu cel pe care l-ați folosi pentru a trage în active în mod normal, adică prin scenariu sau legătură elemente în HTML, încărcarea fișierelor direct din folderul "bower_components".
Cu toate acestea, acest lucru nu este optim și există modalități mai bune de a merge despre el. De exemplu, s-ar putea să îmbinați toate fișierele JS pe care le utilizați din pachetele dvs. Bower într-un singur fișier comprimat și să le încărcați în schimb.
Veți vedea o demonstrație a modului în care să faceți acest lucru în viitoarea tutorial Automatizare cu alergătorii de activități.
Pachetele instalate prin npm vor fi utilizate în mod obișnuit prin intermediul scripturilor de linie de comandă sau de task runner.
Pachetele diferite vin cu setul propriu de comenzi construite, pe care le puteți utiliza pentru tot felul de sarcini diferite cum ar fi compilarea, comprimarea, combinarea și multe altele. Aceste sarcini specifice pachetelor pot fi, la rândul lor, automatizate prin setarea alergătorilor de sarcini pentru a executa simultan mai multe sarcini.
Veți învăța cum să utilizați pachetele npm în ambele aceste moduri prin tutorialele ulterioare ale acestei serii.
Apoi, urmăriți modul în care puteți utiliza linia de comandă pentru a adăuga un nou nivel de eficiență la codul frontal, atât în modul în care îl dezvoltați, cât și în modul în care rulează,.
Veți învăța cum să utilizați linia de comandă pentru compilarea preprocesorului, autoprefigurarea CSS, optimizarea fișierelor JS și CSS și compilarea pentru stenograma HTML și templatizarea.
Ne vedem în tutorialul următor, Powering Up Front End Code.
Accentsconagua