La ligne de commande pour la conception Web: comprendre l'essentiel

Il y a juste quelques petites choses dont vous aurez besoin pour vous préparer à tous les trucs que vous pouvez faire avec la ligne de commande. De nombreuses introductions génériques à la ligne de commande se concentreront sur des éléments tels que la création de dossiers, le déplacement de fichiers, la navigation dans votre système, etc. Je trouve qu'avec une conception de sites Web, j'utilise rarement ces types de commandes.

Lorsque j'ai commencé à apprendre la ligne de commande, j'ai également rencontré de nombreux tutoriels sautant souvent dans des instructions telles que «Tapez blahdee blah blah dans votre terminal» ou «Exécutez la commande bloop beep boop». Cela laisse généralement quelqu'un de nouveau sur la ligne de commande en disant: «Attendez une minute, quel est mon terminal, où puis-je le trouver, comment l'ouvrir et comment l'utiliser?

Dans ce tutoriel, nous allons nous assurer que vous n’avez pas le même problème. Nous allons commencer au tout début. Vous apprendrez tous les éléments essentiels du travail avec un terminal ou une invite de commandes, notamment comment l'ouvrir, exécuter des commandes, répéter des commandes, cibler votre dossier de projet lors de l'exécution de commandes et gérer les erreurs les plus courantes. message que vous verrez.

Cette série fournira les étapes spécifiques nécessaires pour Mac et Windows, désolé les gars de Linux. Cependant, en devenant un utilisateur de Linux, je suppose que vous êtes probablement déjà familiarisé avec la ligne de commande. De plus, étant un «système nix», la majorité des commandes Mac sont identiques sous Linux, vous devriez donc tout suivre.

Une note sur les applications GUI

Je sais ce que vous pensez, et oui, il est possible d'utiliser des applications graphiques pour gérer certains de ces types de processus. Je le fais souvent moi-même. Cependant, les interfaces graphiques conçues pour tout le monde sont nécessairement une solution unique, donc si vous voulez faire quelque chose qu’une application ne propose pas, vous êtes coincé.

Au moment où vous aurez suivi les didacticiels de cette série, vous aurez le savoir-faire nécessaire pour lancer vos propres projets basés sur la ligne de commande, à tout moment et selon vos besoins.

Quelle est la ligne de commande?

En un mot, la ligne de commande vous permet de ne pas travailler avec une interface visuelle pour approfondir la façon dont les choses sont traitées et avoir plus de contrôle.

Pour vous donner un aperçu, lorsque les ordinateurs sont arrivés sur la scène, la seule façon d'interagir avec eux était via des commandes typées traitées par des interfaces de ligne de commande (CLI). Des interfaces utilisateur graphiques (GUI) ont finalement vu le jour, donnant lieu à l’interaction visuelle «point & clic» que nous connaissons aujourd’hui dans les systèmes d’exploitation et les logiciels.

Dans le monde du web design, les choses ont évolué dans l'autre sens. Pour commencer, presque tous nos outils étaient des logiciels basés sur une interface graphique. Ce n'est que récemment que les solutions basées sur l'interface de ligne de commande pour les problèmes de conception de sites Web deviennent suffisamment accessibles pour que les avantages en valent vraiment la peine.

La première chose à comprendre à propos de la ligne de commande est que, pour l'utiliser, vous avez besoin d'un programme spécialisé pour taper vos commandes.

Plusieurs options sont disponibles, mais dans cette série, nous utiliserons simplement les programmes par défaut fournis avec Mac et Windows. Sur Mac, le programme utilisé avec la ligne de commande s’appelle «Terminal» et sous Windows, il s’appelle «Invite de commandes».

Comment ouvrir une invite de terminal / commande

Le fait de rechercher et d’exécuter l’invite de commande du terminal n’est pas immédiatement évident si vous ne l’avez jamais utilisé auparavant. Voici comment procéder sur Mac et Windows.

Sur mac

Sur Mac, le moyen le plus simple d'ouvrir un terminal consiste simplement à accéder à votre Launchpad et à y rechercher un terminal.

Le terminal sur Mac ressemble à ceci:

Une fois que vous avez en cours d'exécution, la broche qui ventouse à votre station d'accueil. Croyez-moi, vous allez le vouloir là-bas.

Sous Windows

Dans le langage Windows, la ligne de commande se fait via l'invite de commande.

Sous Windows 8: à partir de l'écran de démarrage, accédez à Applications et, sous Windows, choisissez Invite de commandes.

Vous pouvez également appuyer sur la touche Windows plus R pour ouvrir une fenêtre d'exécution. Dans le champ intitulé Open, tapez cmd et cliquez sur le bouton OK pour lancer l'invite de commande.

L'invite de commandes sous Windows ressemble à ceci:

Remarque rapide: pour être bref, au lieu de dire «terminal / ligne de commande» dans toute la série, j'utiliserai simplement le mot «terminal» à partir de maintenant, sauf en référence aux instructions spécifiques à Windows.

Commandes en cours d'exécution et répétées

Pour exécuter une commande, attendez de voir une invite. Sur Mac, vous pouvez reconnaître l'invite par le signe $ qui se termine par, et sous Windows, elle se termine par un > signe:

Lorsque vous voyez une invite, vous pouvez taper votre commande, puis appuyer sur Entrée pour l'exécuter:

Une chose très pratique à savoir est que si vous voulez répéter une commande, vous pouvez appuyer sur les flèches haut et / ou bas de votre clavier pour faire défiler les commandes précédemment entrées.

Vous constaterez qu’il ya souvent des commandes que vous souhaitez exécuter plus d’une fois, et que vous pouvez simplement appuyer sur la touche Entrée tout en faisant une flèche vers le haut est beaucoup plus rapide que de ressaisir les commandes.

Ouverture d'un terminal dans un dossier spécifique

Pour la plupart des tâches de conception Web que vous exécuterez à l’aide de la ligne de commande, votre terminal doit être orienté vers le dossier contenant votre projet.

Votre terminal affichera le nom du dossier dans lequel vous travaillez actuellement:

Il est possible de naviguer dans votre ordinateur en utilisant la commande cd, abréviation de «changer de répertoire». Toutefois, vous trouverez probablement beaucoup plus facile si vous pouvez simplement cliquer avec le bouton droit de la souris dans votre dossier de projet, puis ouvrir un terminal déjà pointé au bon endroit.

Je le fais personnellement tout le temps, même en utilisant la commande 'cd' serait probablement plus rapide, comme mon cerveau de concepteur préfère travailler de cette façon. Here’s how you can do this on each operating system.

Sur mac

J'utilise une application appelée XtraFinder (gratuite, qui contient un tas de fonctionnalités très utiles) qui vous permet d'ajouter une option Nouveau terminal dans le menu contextuel du Finder.

Sur Windows

Maintenez la touche Maj enfoncée et cliquez avec le bouton droit de la souris dans le dossier de votre projet. Dans le menu contextuel, vous devriez voir une option en lisant la fenêtre de commande Ouvrir ici.

Dans le menu contextuel, vous devriez voir une option en lisant la fenêtre de commande Ouvrir ici.

EACCES Vous n'avez pas la permission? Sudo.

Une des choses que vous pourriez rencontrer dans Mac souvent est un message d'erreur contenant les lettres EACCES.

Il sera souvent accompagné de quelque chose comme "Veuillez réessayer cette commande en tant que root / Administrator".

Si, ou à quel moment, vous voyez cela, cela signifie simplement que vous essayez d'effectuer une tâche nécessitant des privilèges d'accès élevés. Ce système est en place pour vous assurer que personne ne peut apporter de modifications importantes à votre machine sans autorisation.

Le moyen le plus simple de vérifier que vous êtes effectivement autorisé est d’ajouter le mot sudo au début de votre commande, ce qui correspond à «super utilisateur faire».

Vous serez alors invité à entrer votre mot de passe avant de pouvoir continuer.

Lorsque vous ajoutez sudo à une commande, vous opérez en tant que «super utilisateur» du système plutôt qu’un ancien utilisateur habituel. Avec ces privilèges élevés, vous devriez trouver que la commande que vous essayez d'exécuter fonctionne correctement.

Alternatives à sudo

Vous devez savoir que, d’une manière générale, il existe des moyens autres que sudo pour contourner les erreurs de niveau d’accès, telles que la modification de la configuration des autorisations sur votre ordinateur. Cependant, les étapes généralement requises pour ces types de processus dépassent un peu le niveau de base que nous couvrons ici.

Vous pourrez très bien utiliser sudo dans le contexte que nous couvrirons dans cette série. Cela dit, lorsque vous êtes plus à l’aise avec la ligne de commande, vous pouvez rechercher ces autres options.

Voici un processus à mettre en signet pour plus tard sur la correction des autorisations npm, dont la pertinence deviendra apparente dans un didacticiel ultérieur.

Comment sudo sera-t-il indiqué dans cette série?

Lorsque vous devez utiliser sudo dans une commande, j'écris la commande comme suit:

1

[sudo] command here

Cela ne signifie pas que vous devez littéralement taper [sudo] avec les crochets inclus, mais plutôt que vous pouvez ou non avoir besoin d'utiliser sudo, c'est-à-dire

1

sudo command here

ou

1

command here

En cas de doute, vous pouvez toujours essayer la commande sans sudo, puis réessayer avec une erreur EACCES.

Dans le prochain tutoriel

Dans le prochain didacticiel, nous aborderons directement les techniques que vous pouvez utiliser dans vos workflows de conception Web existants, en expliquant comment utiliser la ligne de commande pour la gestion des packages tiers.

Vous apprendrez comment démarrer avec deux des systèmes de gestion de paquets les plus répandus sur le Web aujourd'hui et comment les utiliser pour trouver, installer et mettre à jour des packages à utiliser dans vos projets.

On se verra là bas!