De opdrachtregel voor webontwerp de basisprincipes begrijpen

Er zijn slechts een paar dingen die je nodig hebt om je voor te bereiden op alle coole webdesign-dingen die je kunt doen met de opdrachtregel. Veel generieke introducties op de opdrachtregel richten zich op zaken als het maken van mappen, het verplaatsen van bestanden, het navigeren door uw systeem, enzovoort. Ik merk dat ik met een focus op webontwerp zelden gebruik maak van dit soort opdrachten.

Toen ik voor het eerst begon met het leren van de commandoregel, kwam ik ook veel tutorials tegen die vaak direct in instructies sprongen zoals "Type blahdee blah blah in je terminal" of "Run the command bloop beep boop." Dit laat typisch iemand helemaal nieuw op de opdrachtregel staan , "Wacht even, wat is mijn terminal, waar vind ik het, hoe open ik het en hoe gebruik ik het?"

In deze zelfstudie gaan we ervoor zorgen dat u niet hetzelfde probleem hebt. We zullen bij het allereerste begin beginnen. U leert alle essentiële zaken van het werken met een terminal of opdrachtprompt, inclusief hoe u deze kunt openen, hoe u opdrachten kunt uitvoeren, hoe u opdrachten kunt herhalen, hoe u uw projectmap moet richten op het uitvoeren van opdrachten en hoe u met de meest voorkomende fout moet omgaan bericht dat je zult zien.

Deze serie biedt de specifieke stappen die nodig zijn voor zowel Mac als Windows - sorry voor Linux-jongens. Ik vermoed echter dat door Linux-gebruiker te zijn, je waarschijnlijk al bekend bent met de commandoregel. Naast dat, omdat het een "nix-systeem" is, zijn de meeste Mac-opdrachten identiek op Linux, dus je zou het goed moeten vinden om toch mee te gaan.

Een opmerking over GUI-apps

Ik weet wat je misschien denkt, en ja, het is mogelijk om GUI-apps te gebruiken om sommige van dit soort processen aan te pakken; Ik doe dit vaak zelf. GUI's die voor iedereen zijn ontworpen, zijn echter noodzakelijk one size fits all oplossing, dus als je merkt dat je iets wilt doen waar een app niet voor zorgt, zit je vast.

Tegen de tijd dat je de tutorials in deze serie hebt gevolgd, heb je de know-how om je eigen door opdrachtregel aangedreven projecten te rollen, op elk moment en op elke manier die je nodig hebt.

Wat is de commandoregel?

In een notendop geeft de opdrachtregel u een manier om het werken met een visuele interface over te slaan, zodat u uw haken dieper in de manier waarop dingen worden verwerkt en meer controle hebt kunt krijgen.

Om u wat achtergrondinformatie te geven, toen computers voor het eerst ter plaatse kwamen, was de enige manier om ermee te communiceren via getypte opdrachten die werden verwerkt door opdrachtregelinterfaces (CLI's). Uiteindelijk ontstonden grafische gebruikersinterfaces (GUI's) die leidden tot de visuele "point & click" -interactie die we tegenwoordig gewend zijn in besturingssystemen en software.

In de wereld van webdesign zijn dingen in de andere richting geëvolueerd. Om te beginnen waren bijna al onze tools op GUI gebaseerde software. Pas in relatief recente tijden worden op CLI gebaseerde oplossingen voor problemen met webontwerp voldoende toegankelijk, zodat de uitbetaling het echt de moeite waard maakt om ze te leren gebruiken.

Het eerste dat u moet begrijpen over de opdrachtregel is dat u voor het gebruik een gespecialiseerd programma nodig hebt om uw opdrachten in te typen. 

Er zijn verschillende opties beschikbaar, maar in deze serie gebruiken we alleen de standaardprogramma's die worden geleverd met Mac en Windows. Op Mac werd het programma dat met de opdrachtregel werkte "Terminal" genoemd en in Windows wordt dit "Command Prompt" genoemd.

Hoe een Terminal / Command Prompt te openen

Het vinden en uitvoeren van de terminal / opdrachtprompt is niet meteen duidelijk als u nog nooit eerder hebt gebruikt. Hier is hoe het te doen op Mac en Windows.

Op Mac

Op de Mac is de eenvoudigste manier om een ​​terminal te openen gewoon om naar je Launchpad te gaan en daarnaar te zoeken Terminal er.

De Terminal op Mac ziet er zo uit:

Zodra je het hebt uitgevoerd, speld je die sucker naar je dock. Vertrouw me, je zult het daar willen hebben.

Op Windows

In Windows-taal is de commandoregel via gedaan Opdrachtprompt

Op Windows 8: ga vanaf het startscherm naar Apps, en onder Windows-systeem Kiezen Opdrachtprompt.

U kunt ook op drukken ramen sleutel plus R om een ​​startvenster te openen. In het veld met het label Open type cmd en klik op de OK om de opdrachtprompt te starten.

De opdrachtprompt voor Windows ziet er als volgt uit:

Snelle notitie: Kortheidshalve, in plaats van 'terminal / opdrachtregel' te zeggen in de hele reeks, gebruik ik het woord 'terminal' vanaf hier, tenzij ik verwijs naar Windows-specifieke instructies.

Opdrachten uitvoeren en herhalen

Wacht tot u een prompt ziet om een ​​opdracht uit te voeren. Op Mac kun je de prompt herkennen door de $ teken dat het eindigt met, en op Windows eindigt het met een > teken:

Prompt op Mac TerminalPrompt op de opdrachtprompt van Windows

Wanneer u een prompt ziet, kunt u uw opdracht typen en op Enter drukken om het uit te voeren:

Een superhandig ding om te weten is dat als u een opdracht wilt herhalen, u op de pijl omhoog en / of omlaag op uw toetsenbord kunt drukken om door eerder ingevoerde opdrachten te bladeren.

U zult merken dat er vaak opdrachten zijn die u meerdere malen wilt uitvoeren, en dat u gewoon naar boven kunt gaan en vervolgens op kunt drukken invoeren is veel sneller dan opdrachten opnieuw typen.

Een terminal openen in een specifieke map

Voor de meeste webontwerptaken die u uitvoert via de opdrachtregel, heeft u uw terminal nodig om te worden gewezen op de map waarin uw project zich bevindt. 

Uw terminal toont de naam van de map waarin u momenteel werkt:

Het is mogelijk om uw weg te navigeren op uw computer met behulp van de CD commando, een afkorting voor "change directory". U zult het waarschijnlijk een stuk eenvoudiger vinden als u gewoon met de rechtermuisknop in uw projectmap klikt en vervolgens een terminal opent die daar al op de juiste plaats is gericht.

Persoonlijk doe ik dit altijd, zelfs wanneer het gebruik van het "cd" -commando waarschijnlijk sneller zou zijn, omdat mijn ontwerpersbrein er de voorkeur aan geeft op deze manier te werken. Hier leest u hoe u dit op elk besturingssysteem kunt doen.

Op Mac

Ik gebruik een app genaamd XtraFinder (gratis, en heeft een hele reeks echt nuttige functies) waarmee je een kunt toevoegen Nieuwe terminal hier optie voor het contextmenu in Finder.

Op Windows

Houd ingedrukt Verschuiving en klik met de rechtermuisknop in uw projectmap. In het contextmenu zou een optie moeten worden gelezen Open het commandovenster hier.

In Windows is dit altijd hoe ik een opdrachtprompt openmaak, omdat ik vind dat dit de gemakkelijkste manier is.

EACCES Heb je geen toestemming? sudo.

Een van de dingen die je vaak tegenkomt op Mac is een van de verschillende soorten foutenmeldingen die de letters bevatten EACCES.

Vaak gaat dit gepaard met "Probeer deze opdracht opnieuw uit te voeren als root / beheerder".

Als, of wanneer, u dit ziet, betekent dit alleen dat u probeert een taak uit te voeren waarvoor verhoogde toegangsrechten nodig zijn. Dit systeem is aanwezig om ervoor te zorgen dat niemand zonder toestemming uw machine kan wijzigen.

De eenvoudigste manier om te controleren of u inderdaad bent geautoriseerd, is door het woord toe te voegen sudo aan het begin van uw opdracht, wat een afkorting is voor "supergebruiker".

U wordt vervolgens gevraagd om uw wachtwoord in te voeren voordat u verder kunt gaan.

Wanneer u toevoegt sudo naar een opdracht die u gebruikt als de 'supergebruiker' van het systeem in plaats van als een normale oude gebruiker. Met deze verhoogde rechten zou je het commando moeten vinden dat je probeert uit te voeren prima werkt.

Alternatieven voor sudo

U moet zich ervan bewust zijn dat er over het algemeen andere manieren zijn dan sudo om fouten op toegangsniveau te omzeilen, zoals het wijzigen van de manier waarop machtigingen zijn ingesteld op uw computer. De stappen die doorgaans vereist zijn voor dit soort processen zijn echter iets meer dan het basisniveau dat we hier behandelen. 

Je zult goed zijn om te gebruiken sudo in de context die we in deze serie behandelen. Dat gezegd hebbende, als je meer vertrouwd bent met de command line, wil je misschien die andere opties uitzoeken.

Hier is één proces om later een bladwijzer te maken voor het bevestigen van npm-machtigingen, waarvan de relevantie later in een les zal blijken.

Hoe sudo gebruik in deze serie wordt aangegeven

Waar je ook moet gebruiken sudo in een commando, zal ik het commando als volgt schrijven:

[sudo] commando hier

Dit betekent niet dat je letterlijk moet typen [Sudo] met de vierkante haakjes inbegrepen, maar veeleer dat je dit misschien wel of niet hoeft te gebruiken sudo, d.w.z.

sudo commando hier

of

commando hier

Als u twijfelt, kunt u het commando altijd zonder proberen sudo en probeer het dan opnieuw, als je een ziet EACCES fout.

In de volgende zelfstudie

In de volgende zelfstudie gaan we direct op zoek naar technieken die u kunt gebruiken in uw bestaande webontwerpworkflows, door de opdrachtregel voor pakketbeheer van derden te doorlopen..

U leert vandaag nog hoe u aan de slag kunt gaan met twee van de meest populaire pakketbeheersystemen op het web en hoe u ze kunt gebruiken om pakketten te zoeken, te installeren en bij te werken voor gebruik in uw projecten..

ik zie je daar!