La linea di comando per il web design cogliere le basi

Ci sono solo alcune cose che ti serviranno per prepararti a tutto ciò che puoi fare con la linea di comando. Molte introduzioni generiche alla riga di comando si concentreranno su cose come la creazione di cartelle, lo spostamento di file, la navigazione nel sistema e così via. Trovo che con un focus sul web non utilizzo mai raramente questi tipi di comandi.

Quando ho iniziato a imparare la riga di comando ho anche incontrato un sacco di tutorial che saltano direttamente in istruzioni come "Type blahdee blah blah nel tuo terminale" o "Esegui il comando bloop beep boop." Questo in genere lascia qualcuno di nuovo alla riga di comando dicendo , "Aspetta un minuto, qual è il mio terminale, dove lo trovo, come lo apro e come lo uso?"

In questo tutorial faremo in modo di non avere lo stesso problema. Cominceremo dall'inizio. Imparerai tutto il necessario per lavorare con un terminale o un prompt dei comandi incluso come aprirlo, come eseguire i comandi, come ripetere i comandi, come scegliere come target la cartella del progetto quando si eseguono i comandi e come gestire l'errore più comune messaggio che vedrai.

Questa serie fornirà i passaggi specifici necessari sia per Mac che per Windows, mi dispiace ragazzi di Linux. Tuttavia, suppongo che solo essendo un utente Linux probabilmente avrai già un certo grado di familiarità con la riga di comando. Inoltre, essendo un "sistema nix", la maggior parte dei comandi Mac è identica su Linux, quindi dovresti essere comunque in grado di seguire comunque.

Una nota sulle app GUI

So cosa potresti pensare, e sì, è possibile usare le app della GUI per gestire alcuni di questi tipi di processi; Lo faccio spesso anch'io. Tuttavia, le GUI progettate per tutti sono per necessità a taglia unica soluzione, quindi se trovi che vuoi fare qualcosa che un'app non prevede, sei bloccato.

Quando avrai seguito i tutorial di questa serie avrai il know-how per essere in grado di eseguire i tuoi progetti alimentati dalla riga di comando, in qualsiasi momento e in qualsiasi modo tu abbia bisogno di loro.

Qual è la riga di comando?

In poche parole, la riga di comando ti offre un modo per saltare il lavoro con un'interfaccia visuale in modo da poter approfondire il tuo modo di elaborare le cose e avere più controllo.

Per darti un po 'di background, quando i computer sono arrivati ​​per la prima volta sulla scena, l'unico modo per interagire con loro era tramite comandi digitati elaborati da CLI (command line interfaces). Alla fine sono emerse interfacce utente grafiche (GUI) che hanno generato l'interazione visiva "punta e clicca" a cui siamo abituati oggi nei sistemi operativi e nei software.

Nel mondo del web design le cose si sono evolute nella direzione opposta. Per cominciare, quasi tutti i nostri strumenti erano software basati su GUI. Solo in tempi relativamente recenti le soluzioni basate sulla CLI per i problemi del web design sono diventate accessibili a sufficienza che il payoff lo fa bene e veramente vale la pena imparare ad usarle.

La prima cosa da capire sulla linea di comando è che per usarlo è necessario un programma specializzato in cui digitare i comandi. 

Sono disponibili diverse opzioni, tuttavia in questa serie utilizzeremo solo i programmi predefiniti forniti con Mac e Windows. Su Mac il programma utilizzato per lavorare con la riga di comando si chiama "Terminale" e su Windows si chiama "Prompt dei comandi".

Come aprire un terminale / prompt dei comandi

In realtà trovare ed eseguire il terminale / prompt dei comandi non è immediatamente evidente se non lo hai mai usato prima. Ecco come farlo su Mac e Windows.

Su Mac

Su Mac, il modo più semplice per aprire un terminale è semplicemente andare al tuo Launchpad e cercare terminale Là.

Il terminale su Mac si presenta così:

Una volta che l'hai in esecuzione, aggiungi quel pollone al tuo dock. Fidati di me, lo vorrai lì.

Su Windows

Nel linguaggio di Windows la riga di comando viene eseguita tramite Prompt dei comandi

Su Windows 8: dalla schermata iniziale vai a applicazioni, e sotto Sistema Windows scegliere Prompt dei comandi.

In alternativa, premi finestre chiave più R per aprire una finestra di esecuzione. Nel campo etichettato Aperto genere cmd e fare clic su ok pulsante per avviare il prompt dei comandi.

Il prompt dei comandi su Windows ha il seguente aspetto:

Nota rapida: Per brevità, invece di dire "terminale / riga di comando" in tutta la serie userò solo la parola "terminale" da qui in avanti, a meno che non si faccia riferimento alle istruzioni specifiche di Windows.

Esecuzione e comandi ripetuti

Per eseguire un comando, attendere finché non viene visualizzato un prompt. Su Mac puoi riconoscere il prompt di $ firma termina con, e su Windows finisce con a > cartello:

Richiedi sul terminale MacRichiedi il prompt dei comandi di Windows

Quando viene visualizzato un prompt, è possibile digitare il comando, quindi premere Invio per eseguirlo:

Una cosa molto utile da sapere è che se vuoi ripetere un comando puoi premere la freccia su e / o giù sulla tastiera per scorrere i comandi precedentemente inseriti.

Scoprirai che ci sono spesso comandi che vorrai eseguire più di una volta, ed essere in grado di fare solo una freccia e poi premere accedere è molto più veloce dei comandi di ridigitazione.

Aprire un terminale in una cartella specifica

Per la maggior parte delle attività di web design che eseguirai usando la riga di comando avrai bisogno che il tuo terminale sia puntato verso la cartella che ospita il tuo progetto. 

Il tuo terminale mostrerà il nome della cartella in cui stai lavorando al momento:

È possibile navigare intorno al tuo computer usando il CD comando, abbreviazione di "cambia directory". Tuttavia, probabilmente lo troverai molto più semplice se puoi semplicemente fare clic destro all'interno della cartella del progetto, quindi aprire un terminale da lì già puntato nel posto giusto.

Personalmente lo faccio sempre, anche se usare il comando "cd" sarebbe probabilmente più veloce, poiché il mio cervello di designer preferisce semplicemente lavorare in questo modo. Ecco come puoi farlo su ogni sistema operativo.

Su Mac

Io uso un'app chiamata XtraFinder (gratuita, e ha un sacco di funzioni davvero utili) che ti permette di aggiungere un Nuovo terminale qui opzione per il menu di scelta rapida nel Finder.

Su Windows

Tieni premuto Cambio e fare clic con il tasto destro all'interno della cartella del progetto. Nel menu di scelta rapida dovresti vedere un'opzione di lettura Apri la finestra di comando qui.

Su Windows questo è sempre il modo in cui apro un prompt dei comandi perché trovo che sia il modo più semplice.

EACCES Non hai il permesso? sudo.

Una delle cose che potresti trovarti ad eseguire spesso su Mac è una varietà o l'altra di un messaggio di errore contenente le lettere EACCES.

Sarà spesso accompagnato da qualcosa come "Si prega di provare a eseguire questo comando nuovamente come root / amministratore."

Se, o quando, vedi questo significa solo che stai cercando di completare un'attività che richiede privilegi di accesso elevati. Questo sistema è attivo per garantire che nessuno possa apportare modifiche significative alla macchina senza autorizzazione.

Il modo più semplice per verificare se sei effettivamente autorizzato è aggiungere la parola sudo all'inizio del tuo comando, che è l'abbreviazione di "super user do".

Ti verrà chiesto di inserire la password prima di poter procedere.

Quando aggiungi sudo a un comando stai operando come "superutente" del sistema piuttosto che come un normale vecchio utente. Con questi privilegi elevati dovresti trovare il comando che stai cercando di eseguire funziona bene.

Alternative a sudo

Dovresti essere consapevole che in generale ci sono modi diversi da sudo per aggirare gli errori del livello di accesso, come cambiare il modo in cui le autorizzazioni sono impostate sulla macchina. Tuttavia, i passaggi normalmente richiesti per questi tipi di processi sono un po 'oltre il livello di base che stiamo trattando qui. 

Starai bene da usare sudo nel contesto ci occuperemo di questa serie. Detto questo, quando sei più a tuo agio con la linea di comando, potresti voler cercare quelle altre opzioni.

Ecco un processo da aggiungere ai segnalibri per poi correggere i permessi di npm, la cui rilevanza diventerà evidente in un tutorial successivo.

In che modo l'uso verrà indicato in questa serie

Ovunque tu possa dover usare sudo in un comando, scriverò il comando in questo modo:

[sudo] comando qui

Questo non significa che dovresti letteralmente scrivere [Sudo] con le parentesi quadre incluse, ma piuttosto che potresti dover o meno aver bisogno di usare sudo, vale a dire.

comando sudo qui

o

comando qui

In caso di dubbio, puoi sempre provare il comando senza sudo e poi riprova con esso, se vedi un EACCES errore.

Nel prossimo tutorial

Nel prossimo tutorial passeremo direttamente alle tecniche che è possibile utilizzare per i flussi di lavoro di progettazione Web esistenti, passando dall'uso della riga di comando per la gestione dei pacchetti di terze parti.

Imparerai come iniziare con due dei più diffusi sistemi di gestione dei pacchetti sul web oggi e come utilizzarli per trovare, installare e aggiornare i pacchetti da utilizzare nei tuoi progetti.

Ci vediamo lì!