Share
We gebruiken vaak pakketten van derden in webontwerpprojecten.
We laden CSS van derden in uit projecten zoals Bootstrap en Foundation en scripts zoals jQuery en Modernizr. Steeds vaker gebruiken we ook pakketten van derden als onderdeel van ontwikkelingsprocessen, zoals compilers voor CSS-preprocessors of code-opschonings- en compressietools om de snelheid te maximaliseren die onze sites laden en uitvoeren op.
Omgaan met al deze pakketten kan snel een puinhoop worden van handmatig downloaden, bestanden overbrengen en updaten. Natuurlijk hebben we het laten werken, maar het is tijdrovend en de logheid ervan laat projecten vaak achter met behulp van verouderde code. Nu is er een betere manier, door pakketbeheerders met opdrachtregel te gebruiken.
In deze zelfstudie leert u hoe u het afhandelen van pakketten van derden kunt regelen door een handvol opdrachten van twee tot vijf woorden in te typen.
Notitie: Als u de eerste zelfstudie in deze serie, Begrijpen met de basisbeginselen, nog niet hebt gevolgd, vindt u het handig om die eerst door te nemen voordat u hier begint.
Om aan de slag te gaan met de opdrachtregel om pakketten van derden te verwerken, is het eerste dat u nodig hebt een "pakketbeheersysteem" of "pakketbeheerder". De twee keuzes die verreweg het populairst zijn bij webontwerpers op dit moment zijn npm en Bower, en dat zijn de systemen die u vandaag zult leren gebruiken.
Je hebt misschien gehoord van Node.js, een op JavaScript gebaseerde tas met goodies die alles van blogplatforms tot codering van IDE's, tot mediacenters tot complete besturingssystemen kunnen aansturen.
Samen met een installatie van Node.js komt de pakketbeheerder npm, een enorm handig systeem dat je vaak zult zien gebruikt in deze serie.
In tegenstelling tot wat je misschien eerst zou denken, doet npm dat wel niet staan voor "Node Package Manager." Officieel staat het voor "Npm is geen acroniem" en aan de bovenkant van de site zie je elke keer dat je opfrisst, kleine grappen tevoorschijn komen, zoals "snuffel nooit apen" en "salamanders paradeerden majestueus".
Vanaf dit moment biedt npm toegang tot en beheer voor 127.664 pakketten die zijn ontworpen voor alle verschillende soorten doeleinden. Onder de items die nuttig zijn voor webdesign vindt u pakketten zoals:
Voor deze tutorial gebruiken we npm in combinatie met Node.js, maar het is een onafhankelijke entiteit die kan worden gebruikt met andere systemen, zoals de nieuw aangekomen IO.js.
Als beginner raad ik je aan de tutorials te volgen met Node.js, maar misschien vind je het leuk om later andere opties te verkennen.
Mijn inleiding tot het gebruik van de opdrachtregel voor pakketbeheer van derden kwam eigenlijk via Bower. Iemand heeft me er door getipt van te kantelen
"Heb je Bower geprobeerd? Het is geweldig!"
Ik had geen idee waarvoor het zou worden gebruikt, dus ging ik naar www.bower.io en een blik op de lijst met beschikbare pakketten was alles wat nodig was om de gloeilamp te laten afgaan.
De bower-pakketbibliotheek bevat dingen als:
De kans is erg hoog dat u op zijn minst regelmatig een of twee van die pakketten in uw projecten gebruikt. Bower maakt het sneller en gemakkelijker voor u om dit te blijven doen.
In sommige gevallen vindt u mogelijk een pakket beschikbaar op zowel npm als Bower. Zo ja, welke versie zou u moeten gebruiken?
Beide opties installeren en updaten pakketten net zo snel als elkaar. Er zijn geen vaste regels die je kunt gebruiken, en uiteindelijk zul je je eigen manier van doen ontwikkelen, dus ik zal je een algemene vuistregel geven waarop je je beslissingen kunt baseren voor nu.
Vanuit het oogpunt van webontwerp komt het verschil in feite neer op hoe u de pakketten gaat gebruiken, en de twee typische use-cases die u zult hebben zijn voor front-end deployment vs. development gebruik.
Bower is ontworpen voor frontend pakketbeheer, dus kies het als u op zoek bent naar iets dat door bezoekers van de site wordt verbruikt via een browser.
Aan de andere kant zullen npm-pakketten de juiste keuze zijn als je alleen een pakket gaat gebruiken als onderdeel van je ontwikkelingsproces en het niet wordt opgenomen in het eindproduct.
Gelukkig is het installeren van npm tamelijk eenvoudig omdat het samen met het installatieprogramma voor Node.js. is gebundeld. Ga naar http://www.nodejs.org en download het installatieprogramma voor uw platform. Installeer het op uw computer en er zal npm mee worden geïnstalleerd, dan bent u goed om verder te gaan.
Belangrijk! Zelfs als je Node.js al op je systeem hebt geïnstalleerd, volg je de bovenstaande stap om er zeker van te zijn dat je de nieuwste versie hebt. Als u een verouderde versie gebruikt, werken sommige stappen die u moet volgen als u deze reeks doorloopt mogelijk niet.
Volgens de npm-site is de kans groot dat er mogelijk een nieuwere versie van npm beschikbaar is dan degene die u bij uw Node.js-installatie hebt gebundeld.
Ga als volgt te werk om ervoor te zorgen dat u de nieuwste versie gebruikt:
[sudo] npm npm -g installeren
Git is, samen met Node.js en npm, een vereiste voor het gebruik van Bower. Git is ook een voorwaarde voor sommige van de andere webontwerpgerichte pakketten die je zelf wilt gebruiken, dus laten we het allemaal wegleggen op je systeem voordat je verder gaat.
Voor OSX-gebruikers wil je naar de hoofd-Git-website gaan, het binaire installatieprogramma pakken en het uitvoeren zoals elk ander app-installatieprogramma: http://git-scm.com/download/mac
Om Bower op Windows te kunnen gebruiken, heeft u in plaats daarvan een specifieke versie van Git nodig voor Windows met de naam msysGit. Druk op de Download knop en pak het uitvoerbare installatieprogramma, maar voer het nog niet uit: http://msysgit.github.io
De reden dat ik zei om het nog niet te installeren, is dat je voorzichtig moet zijn om de juiste instelling te kiezen bij het uitvoeren van het installatieprogramma. Als je het onderstaande scherm ziet, controleer dan Voer Git uit vanaf de opdrachtprompt van Windows.
Voor meer informatie over het installeren van msysGit als een vereiste voor Bower, zie: Een opmerking voor Windows-gebruikers.
Bower kan worden geïnstalleerd via npm door deze opdracht uit te voeren:
[sudo] npm install -g bower
Mac-gebruikers, omdat we de. Gebruiken -g vlag om Bower globaal te installeren, onthoud dat je waarschijnlijk moet opnemen sudo aan het begin van de opdracht en voer vervolgens uw wachtwoord in wanneer daarom wordt gevraagd.
Zowel npm als Bower werken met gespecialiseerde manifestbestanden die informatie bevatten over een project en een lijst met pakketten die het gebruikt. Met npm-projecten heet dat bestand "package.json" en in Bower-projecten heet het "bower.json". De eenvoudigste manier om deze bestanden te maken is om de in het commando geassocieerd met elk. Laten we dat nu doen.
Plaats de volgende opdracht met uw terminal gericht op de hoofdmap van uw project:
npm init
Dit zal u een reeks vragen stellen die u kunt beantwoorden binnen de terminal, met de informatie dat uw "package.json" -bestand zal worden aangemaakt vanuit.
Lees meer over de npm init commando op: https://docs.npmjs.com/cli/init
Nogmaals, met je terminal gericht op de hoofdmap van je project, voer je deze opdracht uit:
priem init
Net als bij het initialisatieproces van npm, beantwoordt u een reeks vragen en uw antwoorden vormen uw "bower.json" -bestand.
Lees meer over de priem init commando op: http://bower.io/docs/creating-packages/#bowerjson
Met het geïnitialiseerde project bent u klaar om pakketten te introduceren. Om dit te doen, moet u de pakketten die u wilt gebruiken vinden via npm of Bower.
U moet op de juiste locatie zoeken omdat u de juiste naam van het pakket in het npm- of Bower-ecosysteem moet kennen om het te kunnen installeren en bijwerken.
U kunt met npm zoeken naar pakketten die u wilt gebruiken via de zoekbalk bovenaan hun startpagina.
Het is ook mogelijk om rechtstreeks via de opdrachtregel te zoeken npm zoeken , ik vind het persoonlijk echter gemakkelijker om direct op de npm-site te vinden waarnaar ik op zoek ben.
Wanneer u het pakket vindt dat u wilt gebruiken, noteert u de pakketnaam.
Zoeken naar Bower-pakketten kan via http://bower.io/search/.
Maak net als bij npm een notitie van de pakketnaam die u wilt gebruiken zodra u deze vindt.
Zodra u een pakket hebt gevonden dat u wilt gebruiken, bent u klaar om het te installeren. Hier gebruikt u de pakketnaam die u hebt genoteerd. Gebruik de onderstaande instructies in de onderstaande instructies, waar u ook bent
Om een pakket lokaal te installeren, d.w.z. alleen in uw projectmap, voert u het volgende uit:
npm installeren
Het pakket wordt gedownload naar een submap met de naam "node_modules", waardoor deze beschikbaar is voor gebruik binnen uw project. Bijvoorbeeld:
Naast het lokaal installeren van pakketten is er ook de mogelijkheid om npm-pakketten wereldwijd te installeren.
Lokaal geïnstalleerde pakketten zijn alleen beschikbaar voor gebruik binnen de context van uw project, maar wereldwijd geïnstalleerde pakketten kunnen overal op uw machine worden gebruikt. Zodra het 'minder'-pakket bijvoorbeeld globaal is geïnstalleerd, kunt u het gebruiken om elk ".less" -document te compileren, overal in uw systeem..
Om een pakket globaal te installeren, bevestig het -g vlag op uw bevel:
[sudo] npm installeren-g
Het installatieproces voor Bower-pakketten is bijna precies hetzelfde als met npm, met behulp van de opdracht:
installatie van prieel
Het verschil is dat Bower-pakketten in een submap met de naam "bower_components" worden geplaatst, bijvoorbeeld:
Omdat u Bower gebruikt voor het implementeren van frontend-pakketten binnen specifieke projecten, kunnen al uw installaties lokaal worden uitgevoerd, dus u hoeft de installatie niet te gebruiken -g vlag.
Als u geïnteresseerd bent in het delen of zelfs maar dupliceren en verplaatsen van een project dat u met npm of Bower hebt gebruikt, is afhankelijkheidsmanagement iets om over te weten. Laat me uitleggen waarom.
U herinnert zich de manifestbestanden die u eerder hebt gemaakt; "Package.json" en "bower.json". In elk van deze bestanden kunt u een lijst met pakketten toevoegen waarvan uw project afhankelijk is.
Je hebt al gezien hoe npm-pakketten naar een map met de naam "npm_modules" gaan en van Bower naar "bower_components". Het leuke is dat als je je project wilt delen, je beide mappen volledig kunt weglaten, zolang je afhankelijkheden in je manifestbestanden staan vermeld.
Hiermee kunt u gemakkelijk een paar honderd megabytes of zo besparen, waardoor het veel eenvoudiger wordt om uw project te verplaatsen.
Wanneer iemand anders uw project in handen krijgt, kunnen ze het uitvoeren npm installeren en alle pakketten in het bestand "package.json" worden automatisch gedownload naar een nieuwe map "npm_modules".
Evenzo het bevel installatie van prieel downloadt automatisch de afhankelijkheden die worden vermeld in het bestand "bower.json" en plaatst deze in een nieuwe map "bower_components".
Er zijn twee soorten afhankelijkheden:
Productie afhankelijkheden - in de context van webontwerp verwijst dit naar pakketten die op de voorkant worden ingezet, b.v. Modernizr voor compatibiliteit met verschillende browsers.
Ontwikkelingsafhankelijkheden - in de context van webontwerp verwijst dit naar pakketten die worden gebruikt tijdens de ontwikkeling, b.v. MINDER voor .loze bestandscompilatie.
Met bower en npm kunt u beide productie- en ontwikkelingsafhankelijkheden specificeren. Zoals we eerder hebben besproken, zult u Bower echter gebruiken voor frontend-pakketten en npm voor ontwikkelpakketten. Als zodanig zullen we uw Bower-pakketten afhankelijk maken van productie-afhankelijkheden en uw npm-modules afhankelijk zijn van de ontwikkeling.
De methode voor het instellen van afhankelijkheden is hetzelfde in zowel npm en Bower, en dat is om een vlag toe te voegen aan de opdracht die u gebruikt om een pakket te installeren.
Om een pakket in te stellen als ontwikkelingsafhankelijkheid, voegt u het toe --save-dev vlag, bijv.
npm installeren--save-dev
Het pakket wordt op dezelfde manier geïnstalleerd als u al hebt gezien, maar wordt toegevoegd aan de lijst met devDependencies in je "package.json" -bestand zoals:
Om een pakket in te stellen als een productie-afhankelijkheid, voeg de --opslaan vlag, bijv.
installatie van prieel--opslaan
In dit geval wordt het pakket toegevoegd aan de lijst met afhankelijkheden in het "bower." -bestand zoals:
Notitie: bij het wereldwijd installeren van npm-pakketten met de -g vlag, hoeft u zich geen zorgen te maken over het gebruik van een van beide --opslaan noch --save-dev vlaggen.
Het bijwerken van pakketten is ook een opdracht met één regel voor zowel Bower als npm.
Voor lokaal geïnstalleerde pakketten voert u de volgende opdracht uit in de hoofdmap van uw project, waar uw map "node_modules" is:
npm update
Om in plaats daarvan wereldwijd geïnstalleerde pakketten bij te werken, voegt u de -g vlag:
[sudo] npm update-g
U kunt ook de pakketnaam achterlaten, zodat u al uw pakketten tegelijk kunt bijwerken.
Als u alle pakketten in een specifiek project wilt bijwerken, wijst u uw terminal naar de hoofdmap en voert u het volgende uit:
npm update
En om al uw wereldwijd geïnstalleerde pakketrunnen te updaten:
[sudo] npm update -g
Het bijwerken van Bower-pakketten is in essentie hetzelfde als met npm. Vanuit de hoofdmap van uw project, degene die uw map "bower_components" herbergt, voert u deze opdracht uit:
prieelupdate
De nieuwste versie wordt automatisch gedownload en toegevoegd aan uw map "bower_components".
Zodra je je pakketten hebt geïnstalleerd, wil je waarschijnlijk weten hoe je ze echt kunt gebruiken, toch??
Met Bower-pakketten kan het proces hetzelfde zijn als u zou gebruiken om activa normaal in te trekken, d.w.z. via script of link elementen in uw HTML, bestanden laden rechtstreeks uit uw map "Bower_components".
Dit is echter niet optimaal en er zijn betere manieren om het aan te pakken. U kunt bijvoorbeeld alle JS-bestanden die u gebruikt uit uw Bower-pakketten samenvoegen tot één gecomprimeerd bestand en dat in plaats daarvan laden.
Je zult een demonstratie zien van hoe je dit aanpakt in de komende tutorial Automation met Task Runners.
Pakketten die via npm zijn geïnstalleerd, worden meestal gebruikt via opdrachtregel- of taakrunner-scripts.
Verschillende pakketten worden geleverd met een eigen reeks ingebouwde opdrachten die u kunt gebruiken voor allerlei verschillende taken, zoals compileren, comprimeren, combineren en meer. Deze pakketspecifieke taken kunnen op hun beurt worden geautomatiseerd door taaklopers in te stellen om meerdere taken tegelijk uit te voeren.
Tijdens de volgende zelfstudies van deze serie leert u hoe u npm-pakketten op beide manieren gebruikt.
Komende volgende stap doorlopen we hoe u de opdrachtregel kunt gebruiken om een geheel nieuwe laag van efficiëntie toe te voegen aan uw front-end code, zowel in hoe u het ontwikkelt en hoe het eenmaal volledig werkt..
U leert hoe u de opdrachtregel voor preprocessor-compilatie, CSS autoprefixing, JS- en CSS-bestandsoptimalisatie en compilatie voor HTML-steno en templating gebruikt.
Ik zie je in de volgende tutorial: Power End Front Code.
Accentsconagua